sassの便利な機能を使う

natsu

2023-02-28


sass

入れ子（ネスト）にできる

style.scss

header {
 width: 100%;
 height: 100px;
 background: #B6E3F4;
    >h1 {
      text-align: center;
    }
}

style.css

header {
  width: 100%;
  height: 100px;
  background: #B6E3F4;
}
header > h1 {
  text-align: center;
}

メデイアクエリーもネストで記述する事で、見通しが良くなります。

style.scss

body {
background: #F00;
  @media (max-width:640px) {
    background: #000;
  }
}

style.css

body {
  background: #F00;
}

@media (max-width: 640px) {
  body {
    background: #000;
  }
}

擬似クラスの場合

style.scss

a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;

  &:hover{
  background-color: gainsboro;
  color: #222;
  }
}

style.css

.g-nav ul li a {
  display: block;
  text-align: center;
  line-height: 50px;
  color: #FFF;
}
.g-nav ul li a:hover {
  background-color: gainsboro;
  color: #222;
}

擬似要素の場合

style.scss

a{
display: block;
text-align: center;
line-height: 50px;
color: #FFF;

  &::before{
  display: block;
  content: "";
  }
}

変数が使える

style.scss

$point-pc: 1240px;
$point-tablet: 959px;
$point-lsp: 767px;
$point-sp: 575px;

演算できる

style.scss

$space: 8px;

h1{
  margin-bottom:$space * 2;
}


style.css

h1 {
  margin-bottom: 16px;
}

関数で繰り返し等の処理が出来る

style.scss

 @for $i from 1 through 8 {
    $width: percentage(1 / $i);
    .col#{$i} {
      width: $width;
    }
  }


style.css

.col1 {
  width: 100%;
}

.col2 {
  width: 50%;
}

.col3 {
  width: 33.33333%;
}

.col4 {
  width: 25%;
}

.col5 {
  width: 20%;
}

.col6 {
  width: 16.66667%;
}

.col7 {
  width: 14.28571%;
}

.col8 {
  width: 12.5%;
}

@mixinと@include を使ってスタイルを定義して、後で呼び出せる

PCファーストの場合
style.scss

//PCファースト
$point-spc: 1239px;
$point-tablet: 959px;
$point-lsp: 767px;
$point-sp: 575px;

@mixin spc {
  @media (max-width:$point-spc) {
    @content;
  }
}
@mixin tablet {
  @media (max-width:$point-tablet) {
    @content;
  }
}
@mixin lsp {
  @media (max-width:$point-lsp) {
    @content;
  }
}
@mixin sp {
  @media (max-width:$point-sp) {
    @content;
  }
}
body {
  background: #ccc;
}
  @include spc {
    body{
      background: #cf619e;
    }
  }
  body{
    @include tablet {
      background: #f00;
    }
  }
  body{
    @include lsp {
      background: #0F0;
   }
  }
  body{
    @include sp {
      background: #00F;
    }
  }

style.css

body {
  background: #ccc;
}
@media (max-width: 1239px) {
  body {
    background: #cf619e;
  }
}
@media (max-width: 959px) {
  body {
    background: #f00;
  }
}
@media (max-width: 767px) {
  body {
    background: #0F0;
  }
}
@media (max-width: 575px) {
  body {
    background: #00F;
  }
}


モバイルファーストの場合

//spファーストの場合
$point-lsp: 576px;
$point-tablet: 768px;
$point-spc: 960px;
$point-pc: 1240px;

@mixin lsp {
  @media (min-width:$point-lsp) {
    @content;
  }
}
@mixin tablet {
  @media (min-width:$point-tablet) {
    @content;
  }
}
@mixin spc {
  @media (min-width:$point-spc) {
    @content;
  }
}
@mixin pc {
  @media (min-width:$point-pc) {
    @content;
  }
}

@useを使って複数のファイルを同時に読み込む

@use "_import1-1.scss";
@use "_import2-2.scss";
@use "_import3-3.scss";


@use機能を使う場合、useで読み込むファイルはコンパイルする必要は無いので、パーシャルファイルにしておきます。
_(アンダースコア)をファイル名の前につける事でパーシャルファイル化出来ます。
複数のパーシャルファイルをinportする場合にはパーシャルファイルを読み込む順番に気をつけましょう。



設定ファイル
liveSassCompilerでは書き出すCSSのフォーマットを「nested」、「expanded」、「compact」、「compressed」の4つの中から選ぶことができます。「nested」はネストを維持したまま出力されます。「expanded」は通常のスタイルシートのように出力されます。「compact」は通常のスタイルシートのように出力されますが、全ての指定が一行ずつになります。「compressed」は可読性は無くなりますが、もっとも軽量化された出力になります。

  "liveSassCompile.settings.formats": [
        {
            "format": "compressed",
            //"format": "expanded",
            "extensionName": ".css",
            "savePath": "~/../css/"
        }
    ],
@use "_reset.scss";

$pc-color:#AAA;
$tab-color:magenta;
$sp-color:olive;
$unit:8px;

header{
width: 100%;
text-align: center;
>h1{
color:$pc-color;
font-size: 40px;
margin-bottom:$unit * 3;
@media (max-width:959px){
color: $tab-color;
font-size: 30px;
}
@media (max-width:767px){
color: $sp-color;
font-size: 24px;
}
}
>p{
color: brown;
margin-bottom: 30px;
}
}
.g-nav{
width: 100%;
height: 50px;
background-color: cadetblue;
@media (max-width:959px){
height: 40px;
}
@media (max-width:767px){
height: 80px;
}

>ul{
max-width: 960px;
margin: 0 auto;
display: flex;
@media (max-width:767px){
flex-wrap: wrap;
}
>li{
width: 25%;
@media (max-width:767px){
width: 50%;
}
>a{
display: block;
text-align: center;
line-height: 50px;
background-color: darkslategray;
color: #FFF;
&:hover{
background-color: lightseagreen;
}
@media (max-width:959px){
line-height: 40px;
}
}
&:nth-of-type(n+2){
border-left: 1px solid #FFF;
}
@media (max-width:767px){
&:nth-of-type(3){
border-left: 0;
}
&:nth-of-type(n+3){
border-top: 1px solid #FFF;
}
}
}
}
}


@use "_reset.scss";

//ブレイクポイントを変数化
$tab-point:959px;
@mixin tablet {
@media (max-width:$tab-point){
 @content;
}
}
body{
background-color: blueviolet;
@include tablet{
background-color: cadetblue;
}
}

いいなと思ったら応援しよう！