SASSの概念をまとめる

設定

取り付け

ルビーhttp://rubyinstaller.org/2

cmdにgem install sassインストールsassコンパイラ

を入力

使用方法

cmdからsassフォルダがあるフォルダ

へ

sass--wath sassファイルを含むフォルダ:cssファイルを含むフォルダ

基本構文

1.ネスト

  SASS

.wrap{
    width: 100px;
    height: 20px;
    ul{
    	list-style-type: none;
        li{
            float: left;
        }
    }
}

  CSS

.wrap{
    width: 100px;
    height: 20px;
}
.wrap ul{
    list-style-type: none;
}
.wrap ul li{
    float: left;
}

2.親参照

  SASS

.wrap{
    width: 100px;
    height: 20px;
    & > ul{
    	list-style-type: none;
        li{
            float: left;
            &:nth-of-type(1){
                color: red;
            }
        }
    }
}

  CSS

.wrap{
    width: 100px;
    height: 20px;
}
.wrap > ul{
    list-style-type: none;
}
.wrap > ul li{
    float: left;
}
.wrap > ul li:nth-of-type(1){
    color: red;
}

3.変数

  SASS

$color_01: #f1f1f1;
$color_02: #007b5a;
.nav{
    background: $color_01;
}
.nav ul li{
    color: $color_02;
}

  CSS

.nav{
    background: #f1f1f1;
}
.nav ul li{
    color: #007b5a;
}

4.補間

  SASS

$name : myClass;
$attr : border;
.#{$name}{ 
    #{$attr}-color : blue;
}

  CSS

.myClass{ 
    border-color : blue;
}

5.Mixin

  SASS

@mixin position_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
div{
    @include position_center;
}
span{
    @include position_center;
}

  CSS

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

6.パラメータ

  SASS

@mixin position_center($top, $left: 50%){
    position: absolute;
    top: $top;
    left: $left;
    transform: translate(-50%, -50%);
}
div{
    @include position_center(20%);
}
span{
    @include position_center(40%, 10%);
}

  CSS

div{
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
}
span{
    position: absolute;
    top: 40%;
    left: 10%;
    transform: translate(-50%, -50%);
}

7.内容

  SASS

@mixin tablet{
    @media screen and (max-width: 768px){
        @content;
    }
}
@include tablet{
    p{color: red;}
}

  CSS

@media screen and (max-width: 768px){
    p{color: red;}
}

8.インポート

  _myMixin.scss

@mixin position_center{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

  SASS

@import 'myMixin';
div{
    @include position_center;
}
span{
    @include position_center;
}

  CSS

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

9. Extend

  SASS

.myClass{
    border: none;
}

.button{
    @extend .myClass;
    background-color: red;
}

  CSS

.myClass{
    border: none;
}

.button{
    border: none;
    background-color: red;
}

10. Placeholder

  SASS

%myClass{
    border: none;
}

.button{
    @extend %myClass;
    background-color: red;
}

  CSS

.button{
    border: none;
    background-color: red;
}

例

https://drive.google.com/file/d/1WNnYd-g_mP0eTc9WYP25hnx_-f_aaGVZ/view?usp=sharing