cssの拡張版sass（サス）について

「Sass（サス）」とは、CSSを拡張して効率よく記述できるようにしたスタイルシートのことです。

cssとsassの比較について（入れ子を利用する）

cssで記述する場合

.text{
  font-size: 16px;
}
.text a{
  color: red:
}

sassで記述する場合

.text{
  font-size: 16px;
  a{
    color: red:
  }
}

sassで変数を利用する

cssで記述する場合

#box1{
  background-color: green;
}
#box2 {
  background-color: green;
}

sassで記述する場合

$bgc: green;
#box1{
  background-color: $bgc;
}

#box2 {
  background-color: $bgc;
}

hoverなどの擬似要素を利用した比較

cssで記述する場合

a{
  color: blue;
}
a:hover {
  color: navy:
　opacity:0.8;
}

sassで記述する場合

a{
　color: blue;
  &:hover {
  　color: navy:
　　opacity:0.8;
}

sassでfor文を使用する場合

cssで記述する場合

.width-type1 {
  width: 10px;
}
.width-type2 {
  width: 20px;
}
.width-type3 {
  width: 30px;
}

sassで記述する場合

@for $i from 1 through 3 {
  .width-type#{$i} {
        width: $i * 10px;
  }
}

@extend（継承）と@mixinと@functionの違い

@extend（継承）・・・　利用する事前に、セレクタが定義されている必要がある

@mixin 　　　　・・・　引数が利用できる。型を示す。事前に定義される必要はない。

@function　　　・・・　関数を定義することができ、引数を設定できる。returnで値を返す。
　　　　　　　　　　　 関数を宣言した後に、関数を使用できる。　　　　　　　　　　　

sassで@extend（継承）を使用する

完成イメージ

HTML

<div class="box1">BOX1</div>
<div class="box2">BOX2</div>

cssで記述する場合

.box1, .box2 {
  margin: 0 0 30px;
  padding: 15px;
  border: 1px solid green;
  text-align: center;
  width: 120px;
  color: blue;
}
.box2 {
  color: red;
}

sassで記述する場合

.box1 {
    margin: 0 0 30px;
    padding: 15px;
    border: 1px solid green;
    text-align:center;
    width:120px;
    color:blue;
}
.box2 {
    @extend .box1;
    color:red;
}

sassで@mixinを使用する

完成イメージ

HTML

<div class="box3">BOX3</div>

cssで記述する場合

.box3 {
  margin: 0 0 30px;
  padding: 15px;
  border: 1px solid pink;
  text-align: center;
  width: 120px;
  color: purple;
}

sassで記述する場合

@mixin button($clr) {
   margin: 0 0 30px;
   padding: 15px;
   border: 1px solid pink;
   text-align:center;
   width:120px;
   color:$clr;
}
.box3 {
   @include button(purple)
}

sassで@functionを使用する

完成イメージ

HTML

<div class="box4">BOX4</div>

cssで記述する場合

.box4 {
  margin: 0 0 30px;
  padding: 15px;
  border: 1px solid navy;
  text-align: center;
  width: 450px;
  color: blue;
}

sassで記述する場合

@function wide($c-width){
    @return ($c-width*3)
}
.box4 {
	margin: 0 0 30px;
	padding: 15px;
	border: 1px solid navy;
	text-align:center;
	width:wide(150px);
    color:blue;
}

レスポンシブに対応できるsaas

$breakpoints: (
 'sm': 'screen and (min-width: 576px)',
 'md': 'screen and (min-width: 768px)',
 'lg': 'screen and (min-width: 992px)',
 'xl': 'screen and (min-width: 1200px)'
) !default;

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}