WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

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

$point-pc: 1240px;
$point-tablet: 960px;
$point-lsp: 768px;
$point-sp: 480px;

演算できる

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 を使ってスタイルを定義して、後で呼び出せる

style.scss

$point-pc: 1240px;
$point-tablet: 960px;
$point-lsp: 768px;
$point-sp: 480px;


@mixin pc {
  @media (max-width:$point-pc) {
    @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: #aaa;
}
  @include pc {
    body{
      background: #000;
    }
  }

  body{
    @include tablet {
      background: #f00;
    }
  }

  body{
    @include lsp {
      background: #0F0;
   }
  }
  body{
    @include sp {
      background: #00F;
    }
  }

style.css

body {
  background: #aaa;
}

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

@media (max-width: 960px) {
  body {
    background: #f00;
  }
}

@media (max-width: 768px) {
  body {
    background: #0F0;
  }
}

@media (max-width: 480px) {
  body {
    background: #00F;
  }
}

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

@import "_import1-1.scss";
@import "_import2-2.scss";
@import "_import3-3.scss";
設定ファイル

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

/* 全ての要素にbox-sizing:border-box
 * ress.css • v1.2.2
 * MIT License
 * github.com/filipelinhares/ress
 */html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}