0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Sass(サス) 大学生がまとめてみた

Last updated at Posted at 2021-07-04

Sassを勉強したきっかけ

大学2年生のryousukeです!!

自分のアルバイト先で、案件のモックアップをすることになり 受け身になりますが、先輩からSassが便利だからオススメということでSassの勉強を始めました。

メモ代わりに、適当にQiitaの方にまとめてみました。(メモ代わりなので、色とか付けてないです笑)

Sassとは

一言で表わすと、SassとはCSSを拡張した言語です。

変数や関数が使えて、CSSの記述が楽になります。

    Sassを使うメリット

  • 記述の簡略化ができる
  • 四則計算が使用できる
  • コードの再利用ができる
  • 関数や変数が使える
  • Sassのデメリット

  • ファイルの形式がcssでは無いので、コンパイルする必要がある
  • デザインにこだわらないのであれば、必要性は低い

Sassのコンパイル方法

Sassのコンパイル方法は、拡張機能なりgulpをインストールすることでコンパイルができる

vscode上だけで済むので拡張機能をインストールするのがオススメ

https://rico-notes.com/programming/css/vscode%E3%81%A7sassscss%E3%82%92%E8%87%AA%E5%8B%95%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%99%E3%82%8B%E7%B0%A1%E5%8D%98%E3%81%AA%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95/

gulpはインストールして、gulpfile.jsにscssをcssに変換する以下のタスクを書いてコンパイルする


var gulp = require('gulp');
var sass = require('gulp-sass')(require('sass'));
var sassGlob = require('gulp-sass-glob');
var plumber = require('gulp-plumber');
var notify = require("gulp-notify");
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssdeclsort = require('css-declaration-sorter');
var mqpacker = require('css-mqpacker');
var browserSync  = require('browser-sync');
gulp.task('sass', function() {
return gulp.src('./sass/**/*.scss')
.pipe(plumber({errorHandler: notify.onError("Error:<%= error.message %>")}))
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(postcss([mqpacker()]))
.pipe(postcss([cssdeclsort({order: 'alphabetical'})]))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest('./css'));
});
gulp.task( 'default', function() {
gulp.watch( './sass/**/*.scss', gulp.task('sass'));
});

詳しくは、こちら
npm install sassをする必要があるかも

Sassの使い方

※Sassの書き方には、sass記法とscss記法があるが、今回はscssの方で書く

ネスト(入れ子)

コンパイル時に親セレクタを先頭につけてCSSを生成してくれる

ネストしすぎると、可読性が落ちるので、2~3回ぐらいに抑える必要がある

&を使うと、親セレクタを参照する


main{
   h1{ 
   font-size: 50px;
  }
   .post{ 
   color: black; 
    }
   &:hover{
     padding: 20px;
   }
}

変数

Sassでは、変数を使用できます

$back-color : #282F32;
body{
    h1{
       background : $back-color;
    }
}

パーシャル

Sassのコードを目的やパーツごとに、別々のファイルで管理できる

その別々のファイルのことをパーシャルと呼ぶ。 ファイル名は _ と一緒に記述する

例 _header.scss
//_header.scss 参照元
header{
      padding: 20px;
}
//style.scss 参照先
@use 'header'; 
//これでパーシャルファイルを呼び出す  
//アンダーバー、ファイル名、拡張子の記述は必要ない
//フォルダーがある場合、フォルダー名も記述する必要がある 例@use 'page/header';
body{
background: red;
}

パーシャルの変数を参照元で利用したい場合は、[ファイル名.$変数名]にする必要がある

//style.css
@use 'page/header';
body{
background: header.$back-color;
}

Mixin

スタイルの集まりを定義して、別の場所で再利用できる

関数に近い

@mixin mixin名で定義

@include mixin名で呼び出す


@mixin circle{
    padding : 20px;
}
div{
@include circle;
}

また引数を使用できる


@mixin circle($size){
    padding : $size;
}
div{
    @include circle(60px); //mixin名(引数)
}
また引数は、初期値が設定できる

//@mixin mixin名(引数 : 初期値){}
@mixin circle($size : 60px,$color : red){
padding : $size;
background : $color;
}

@mixinの中で@contentを使用するとコンテントブロックを渡すことができる

@mixin circle{
    @media (min-width : 300px){
        @content; //color : redになる
    }
}

div{
    @include circle{
       color : red;
    }
}

Sassは自作関数を定義できるが、覚え始めの段階では必要なそうなのでパス!!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?