Help us understand the problem. What is going on with this article?

【初心者】 Sassを使ってみよう!

Sassについて勉強会を行ったのでここにもまとめておきます。
今回はインストール方法はMac限定でまとめていきます。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

インストールしよう!

Sassって何?

インストールする前にSassの説明から。
Sassとは、Syntactically Awesome Stylesheets」の略で、直訳すれば「構文的に優れたスタイルシート」という意味になります。簡単に言うと、CSSを効率良く書くための拡張機能!

Sassをインストールしよう!

Sassをインストールするためにはrubyがインストールされていなければならないので、ターミナル上で下記コマンドを打ち、rubyがインストールされているか確認します。まあ、Macならデフォルトであるので確認するまでもないですが。。

$ ruby -v

下記コマンドを打ってSassをインストールします。

$ sudo gem install sass --version “3.4.25”

compassって何?

Sassをインストールしたならついでにcompassもインストールしてしまいましょう!
Compassとは、Sassを元に開発されたCSS記述を効率化するツール。
例えば、ベンダープリフィックス(-webkit-や-moz-など)を自動で付けてくれる!

compassをインストールしよう!

$ sudo gem install compass

このコマンドでインストールできます。

準備しよう!

style.scssファイルを作成し、compassを使えるように@import "compass;"とscssファイルに書きます。

補足・・・

Sassには2種類の書き方があります。
- Sass(インデント)記法
- scss記法
この2つです。今回紹介するのはscss記法なので拡張子は.scssです!Sass記法を使いたければ、拡張子を.sassにすればいいだけです!

コンパイル方法

Web上ではHTML/CSS/JavaScriptしか読み込んでくれないのでscssファイルをCSSファイルに変換しなければなりません!下記コマンドでCSSファイルに変換されます。

$ sass --compass --watch style.scss:style.css

この--watchというのは、もしこれがなかったらいちいちscssファイルの更新があるたびにコマンドを打ってcssファイルに変換しなければなりませんが、--watchがあることでscssファイルに変更があるたびに自動でcssファイルに変換してくれるという機能です!ちなみに、style.scssとstyle.cssのstyleの部分はファイル名なので任意で大丈夫です。

コンパイル結果

write style.css
write style.css.map

コンパイルした結果、ターミナルに上記のような結果が表示されると思います。また、ファイルにもstyle.cssファイルとstyle.css.mapファイルが生成されたと思います。この.mapファイルはcssとscssファイルを結びつける役割を持つファイルで、デベロッパーツールを確認してもらったら分かると思いますが、記述されているcssの位置がscssファイルのどこに記述せれているか表示されていることが分かると思います。web上ではscssファイルを読み込まないため.mapファイルでweb上で読み込んだcssファイルをscssファイルと結び付けているってことです。

基礎編

セレクタのネスト

HTMLと同じ構造になっていることがわかります!入れ子構造ですね。

.scss
.menu{
   width: 250px;
   ul{
      list-style-type: none;
   }
}
.css
.menu{
   width: 250px;
}
.menu ul{
    list-style-type: none;
}

プロパティのネスト

font-sizefont-weight など-(ハイフン)で繋がっているプロパティも
font: { としてネストすることができる!

.scss
.menu{
   font:{
     size: 20px;
     weight: bold;
   }
}
.css
.menu{
   font-size: 20px;
   font-weight: bold;
}

&セレクタ

&を使えば親セレクタ(ここではa)を指定することができる!

.scss
a{
  &:hover{
     color: blue;
  }
}
.css
a:hover{
    color: blue;
}

変数

$変数: 値; で設定し、$変数名 で設定値を取り出します。

.scss
$baseColor: #32cd32;

.menu{
   background-color: $baseColor;
}
.css
.menu{
   background-color: #32cd32;
}

文字列の場合の変数

文字列の場合には、$変数名: “文字列”; で囲み、#{$変数名} で値を取り出します。

.scss
$large: "(min-width: 1025px)";

@meida#{$large}{
    .menu{
       background-color: red;
    }
}
.css
@media(min-width: 1025px){
    .menu{
       background-color: red;
    }
}

発展編

Mixin

@mixin 変数名($変数名: 値){...} でmixinを作成し、@include 変数名; で使うことができます。

.scss
@mixin btn($color: blue) {
  width: 100px;
  background-color: $color;
}

.btn1 {
  @include button;
}
.btn2 {
  @include button(red);
}
.css
.btn1 {
  width: 100px;
  background-color: blue;
}

.btn2 {
  width: 100px;
  background-color: red;
}

Extend

@extend セレクタ名; でそのセレクタで使用されているスタイルをコピーする!

.scss
.btn1 {
  width: 100px;
  background-color: blue;
}

.btn2 {
  @extend .btn1;  
  font-size: 10px;
}
css;.css
.btn1, .btn2 {
  width: 100px;
  background-color: blue;
}

.btn2 {
  font-size: 10px;
}

まとめ

他にも便利な機能が色々あります。例えば四則演算や関数も使えたりします!しかし、大体は上記にあげたようなことが使えれば十分便利です!生産性爆上がりだと思います!基本ネストと変数が使えるだけでももうcssで書きたくないと感じると思います(笑)この機会にscss記法を使いこなしてみましょう。

tokky08
京都在住の学生エンジニアです()
https://tokky08.github.io/
yowayowa-engineer
弱々エンジニア会とは駆け出しエンジニアやベテランエンジニアまで、弱々から強々まで幅広く集まるコミュニティのエンジニア集団です!!メンバー募集してますので気になる方は、URLよりSlackに参加ください!条件等は特にありません!
https://join.slack.com/t/yowayowa-engineer/shared_invite/zt-do4vhhzm-Yj~6DIMIfvqMvHm0hcXGrA
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away