Ubuntuで実行されているVPSでSassを設定する方法

投稿日: 2022-04-20 2022-10-14
タグ: Miscellaneous, Ruby, ubuntu

序章

Sass はCSSプリプロセッサであり、単純なフラットCSSを使用するよりもはるかに効率的かつインテリジェントな方法でスタイルシートを作成できます。これは、コードをより小さく、より再利用可能で、よりスケーラブルにする多数の動的コンポーネントを提供します。その構文はかなり理解しやすく、通常のCSSに置き換わるのではなく追加されます。

このチュートリアルでは、Sassをインストールして使い始める方法を説明します。このため、ブラウザで何かを表示したい場合は、UbuntuとWebサーバーがインストールされた独自のVPSをすでに実行していることを前提としています（ただし、このレベルでは必要ありません）。

ただし、SassはWindowsやOSXなどの他のオペレーティングシステムにもインストールできることに注意してください。

この記事をチェックして、VPSを起動して実行することができます。

Sassのインストール

Sassをインストールするには、最初にシステムにRubyをインストールする必要があるため、最初にそれをインストールする必要があります。さらに、rubygems（Rubyのパッケージ管理システム）をインストールする必要があります。次のコマンドを使用して、これらのタスクの両方を実行してみましょう。

sudo apt-get update
sudo apt-get install ruby-full rubygems

次に、gemコマンドを使用してSassをインストールできます。

sudo gem install sass

Sassがインストールされたので、始めましょう。

Sassを使用する

遊ぶためのスタイルシートを作成しましょう。 Webサーバーのルートフォルダー（Apacheの場合は / var / www ）に移動し、style.scssというファイルを作成します。

cd /var/www
nano style.scss

このファイル内に、次のcssルールを貼り付けます。

.box {
  padding:20px;
  background-color:red;
}

ご覧のとおり、これはいくつかの基本的なcssです。ファイルを保存して終了します。次に、このファイルを通常のcss形式のファイル（拡張子は.cssで終わる）に変換するようにSassに指示する必要があります。

sass --watch style.scss:style.css

このコマンドを使用すると、Sassは.cssファイルを生成し、.scssファイルに変更がないか監視します。それらが発生した場合、.cssファイルは自動的に更新されます。

このコマンドを初めて実行すると、次のエラーが発生します。

[Listen warning]:
  Missing dependency 'rb-inotify' (version '~> 0.9')!
  Please run the following to satisfy the dependency:
    gem install --version '~> 0.9' rb-inotify

次のコマンドを実行して、依存関係を満たすことができます。

gem install --version '~> 0.9' rb-inotify

これはトリックを行います。これで、複数のSassファイルを処理している場合は、-watch コマンドを実行して、.scssファイルのフォルダー全体をコンパイルすることができます。

sass --watch stylesheets/sass:stylesheets/css

これにより、 stylesheets / sass フォルダー内のすべての.scssファイルを追跡し、それらを自動的にコンパイルして、 stylesheets /cssフォルダー内の同等のファイルに変換します。ただし、これらのコマンドの1つを実行すると、停止するように指示するまで、Sassはこの「監視モード」になります。

Ctrl + Cを押すと、ファイルの監視を停止できます。その後、-watch コマンドを再度実行するまで、.scssファイルに加えた変更は.cssファイルに自動的に反映されません。

それで、取引は何ですか？私たちが行ったのは、いくつかのcssをファイルに書き込んでから、別のファイルにコピーすることだけでした。しかし、Sassにはまだまだあります。そのため、Sassを使用する必要があります。では、他に何ができるか見てみましょう。

ネスティング

ネストは、同じセレクターを何度も作成する必要がないようにするための優れた方法です。たとえば、「 .box ul 」、「 .box li 」、「 .box lia」の3つのセレクターがあるとします。。通常、これらには3つの異なるルールを作成する必要があります。

.box ul {
  ...
}
.box li {
  ...
}
.box li a {
  ...
}

しかし、Sassを使用すると、次のようにネストできます。

.box {
  padding:20px;
  background-color:red;
  ul {
    margin:10px;
  }
  li {
    float:left;
    a {
      color:#eee;
    }
  }
}

ご覧のとおり、この方法では、セレクターの.box部分を3回すべて書き込む必要がなくなりました。さらに、それは非常にシンプルで論理的に見えます。ここで、-watch コマンドを使用して同等の.cssを生成すると、これら3つのcssブロックすべてが自動的に作成されます。

.box {
  padding: 20px;
  background-color: red;
}
.box ul {
  margin: 10px;
}
.box li {
  float: left;
}
.box li a {
  color: #eee;
}

さらに、同じロジックを使用してプロパティをネストできます。たとえば、次のように書くことができます。

.box {
  padding: {
    top:20px;
    right:10px;
    bottom:15px;
    left:10px;
  }
}

これにより、「パディング」という単語を4倍書く時間を節約できます。

変数

Sassのもう1つの時間の節約と単純に素晴らしい機能は、変数の使用です。 PHPやjavascriptなどのプログラミング言語と同様に、これにより、変数を1回宣言し、後でコード内で何度でも使用できます。たとえば、次のようなことができます。

$color: #eee;

a {
  color: $color;
}

次に、Sassは、ファイル全体の $ color 変数のすべてのインスタンスを、一度宣言した実際のカラーコード#eeeに置き換えます。

Mixins

これらはおそらく最も強力なSass機能であり、基本的に関数のように動作します。スタイル宣言全体を再利用でき、引数を渡すこともできます。関数と同様に、最初にそれらを宣言します。それでは、2つのわずかに異なるミックスインを宣言しましょう。

@mixin box-size {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

@mixin border($width) {
  border: $width solid #eee;
}

ご覧のとおり、最初のものは引数を取りません。私たちはそれを次のように利用することができます：

.box {
  @include box-size;
}

これにより、次のcssが出力されます。

.box {
  width:200px;
  height:200px;
  padding:10px;
  margin:0px;
}

引数を渡すことで使用できる2番目のミックスイン：

.box2 {
  @include border(1px);
}

これは、ミックスインで定義されたルールを使用し、さらに大きな柔軟性のためにサイズ引数を渡します。これにより、次のcssが出力されます。

.box2 {
  border: 1px solid #eee;
}

これらは、Sassを素晴らしいものにする機能の一部ですが、すべてではありません。いくつかの可能な値やその他のすばらしいものについて、さまざまな計算を行うことができます。詳細と使用例については、SassのWebサイトをご覧ください。

出力スタイル

上で見た–watchコマンドを実行すると、Sassはデフォルトの方法で結果のCSSを.cssファイルに出力します：ネストされています。選択できる出力スタイルには、次の4種類があります。

ネスト：CSSスタイルの構造とスタイル設定しているHTMLドキュメントを反映します。
拡張：各プロパティとルールが1行を占める
コンパクト：各CSSルールは1行のみを使用し、すべてのプロパティがその行で定義されます。
圧縮：ファイルの最後でセレクターと改行を区切るために必要な場合を除いて、空白はありません。

これらのさまざまなスタイルの詳細については、こちらをご覧ください。ただし、これらを切り替える簡単な方法は、-watch コマンド自体で、最後にフラグを追加することです。たとえば、 extended スタイルを使用する場合は、次のようなコマンドを実行します。

sass --watch style.scss:style.css --style=expanded

結論

Sassは非常に強力であり、慣れれば、フロントエンドのエクスペリエンスがはるかに簡単になります。 CSSの考え方にインテリジェンスを追加し、CSSをより効率的に機能させるためのツールを提供します。

投稿者： Danny

getdocs

13036