sass学習ノート1

lessはCSSアニメーションを処理する時、とても気持ち悪くて、sassに転向することを決定しました.sassはlessより早く誕生したが、rubyが書いたので、参加者の顔が少ない.しかし、私たちは自分でコンパイラを降りたり、コマンドラインを使ったりする必要はありません.私たちはkoalaという神器を使うことができます.
まずいくつかの注意点は、sassはsass接尾辞名を使用することも、scss接尾辞名を使用することもできます.前者は吐き気がして、pythonのようにかっこがなく、セミコロンも書かせず、棚を散らすようにします.だからscssを使うことをお勧めします.これも今私が出会ったほとんどの人の選択です.
中国語のコンパイルエラーの問題については、文字セットを指定する必要があります.

@charset "utf-8";//                 
$fontSize: 12px;
body{
    font-size:$fontSize;
}
/*      */
　$side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

注釈の問題、sassには2つの注釈方式があり、1つは標準的なcss注釈方式/*/、もう1つは//ダブルスロープ形式の単行注釈であるが、このような単行注釈は翻訳されない.
インポートの問題は、@importキーワードを使用していますが、接尾辞名がcssの場合、このインポートファイルはコンパイルされません.sass、scss、または書かれていない場合はコンパイルされます.

@import "reset.css";
@import "a";
p{
  background: #0982c1;
} 

では、私たちは正式に文法を勉強し始めました.sassは正統なプログラミング言語である以上、対応する変数、データ構造、関数などがある.
sassはPHPスタイルの$先頭の変数を使用してスタイルを命名し、rubyスタイル#{}プレースホルダを使用します.

@charset "utf-8";//                 
$borderDirection:       top !default; 
$fontSize:              12px !default;
$baseLineHeight:        1.5 !default;

//   class   
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//         
body{
    font:#{$fontSize}/#{$baseLineHeight};
}
$base: ".module";
#{$base} {
    {$base}-something {
        background: red;
    }
}

//-------------------------------
.border-top {
  border-top: 1px solid #ccc; }

body {
  font: 12px/1.5; }

.module.module-something {
  background: red; }

変数とプレースホルダは、複雑で再利用可能な属性値を構築します.
デフォルト値は、書き方が少し似ています!importantですが、優先度が最も低いです.

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//-------------------------------
body{
    line-height:2;
}

コンパイル後のline-heightは、デフォルトの1.5ではなく2です.デフォルト変数の価値は、コンポーネント化の開発に役立ちます.
データ構造では,類似配列のlistタイプ,類似オブジェクトのmapタイプを持つ.
sassの配列は、スペースで要素を分割し、2 Dグループ数の場合はカッコとカンマを使用します.

//    
$array: 5px 10px 20px 30px;

//    
$array2: 5px 10px, 20px 30px;
$array3: (5px 10px) (20px 30px);

sassの配列には「包む」ことも「取る」こともできないという特徴があり、nth内蔵メソッドを必要とし、nthはCSS 3のnth-childと同様に1から始まる.

$linkColor: #08c #333 #ccc;
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

関連操作配列の方法

       
$list:();


join($list1, $list2, $separator:auto)
//      
join(10px 20px, 30px 40px) => 10px 20px 30px 40px
join((blue, red), (#abc, #def)) => blue, red, #abc, #def
join(10px, 20px) => 10px 20px
join(10px, 20px, comma) => 10px, 20px
join((blue, red), (#abc, #def), space) => blue red #abc #def


index($list, $value)
//          ， 1  
index(1px solid red, solid) => 2
index(1px solid red, dashed) => null
index((width: 10px, height: 20px), (height 20px)) => 2

length($list)
//       
length(10px) => 1
length(10px 20px 30px) => 3
length((width: 10px, height: 20px)) => 2

list_separator($list)
//        
list-separator(1px 2px 3px) => space
list-separator(1px, 2px, 3px) => comma
list-separator('foo') => space

nth($list, $n)
//             
nth(10px 20px 30px, 1) => 10px
nth((Helvetica, Arial, sans-serif), 3) => sans-serif
nth((width: 10px, length: 20px), 2) => length, 20px


zip(*$lists)
//   $list             。               ，               

append($list, $val, $separator:auto)

append(10px 20px, 30px) => 10px 20px 30px
append((blue, red), green) => blue, red, green
append(10px 20px, 30px 40px) => 10px 20px (30px 40px)
append(10px, 20px, comma) => 10px, 20px
append((blue, red), green, space) => blue red green

sassのオブジェクトはJSのオブジェクトとよく似ていますが、唯一異なるのは、カッコが様々なネスト境界として使用されるため、カッコで囲まれていることです.また、sassオブジェクトを操作するためには、基本的にmap-で始まる(すべて小文字で「-」でつながっている純粋なrubyスタイル)JSよりも豊富な関数が提供されています.

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

次はメソッドのデモです

map-get 
//             
map-get(("foo": 1, "bar": 2), "foo") => 1
map-get(("foo": 1, "bar": 2), "bar") => 2
map-get(("foo": 1, "bar": 2), "baz") => null


map-remove($map, $key)
//       
map-remove(("foo": 1, "bar": 2), "bar") => ("foo": 1)
map-remove(("foo": 1, "bar": 2), "baz") => ("foo": 1, "bar": 2)


map-keys($map)
//         ，       
map-keys(("foo": 1, "bar": 2)) => "foo", "bar"


map-values($map)
//         ，       
map-values(("foo": 1, "bar": 2)) => 1, 2
map-values(("foo": 1, "bar": 2, "baz": 1)) => 1, 2, 1


map-has-key($map, $key)
//            
map-has-key(("foo": 1, "bar": 2), "foo") => true
map-has-key(("foo": 1, "bar": 2), "baz") => false

map-merge($map1, $map2) 
//      
map-merge(("foo": 1), ("bar": 2)) => ("foo": 1, "bar": 2)
map-merge(("foo": 1, "bar": 2), ("bar": 3)) => ("foo": 1, "bar": 3)

プロセス制御:@if,@else,@for,@each,@while
@ifはとても簡単です.例を直接見てみましょう.

@charset "utf-8";//                 
$boolean: true !default;

@mixin simple-mixin {
    @if $boolean {
        display: block;
    } @else {
        display: none;
    }
}

.some-selector {
    @include simple-mixin;
}
//------------------------------
.some-selector {
  display: block; }

これについてsassにはif内蔵方法があり,三目演算子をシミュレートするために用いられる.

  @if $width != auto {
    $width: if(unitless($width), $width + px, $width);
  }

@forには2つの形式があります.@for xxx form yyyy through zzzまたは@for xxx form yyy to zzzは、ユーザーが開始値と終了値を指定する必要があります.これらはすべて数値である必要があります.

@charset "utf-8";//                 
$name: for !default;
//   JS  for(var $i = 1; $i <= 4; $i++){}
@for $i from 1 through 4 {
    .#{$name}-#{$i}{
        width: 60px + $i;
    }
}

//------------------------------
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

.for-4 {
  width: 64px; }

@charset "utf-8";//                 
$name: for !default;
//   JS  for(var $i = 1; $i < 4; $i++){}
@for $i from 1 to 4 {
    .#{$name}-#{$i}{
        width: 60px + $i;
    }
}

//------------------------------
.for-1 {
  width: 61px; }

.for-2 {
  width: 62px; }

.for-3 {
  width: 63px; }

@forループ命令は、小数値から大数値へのループに加えて、大数値から小数値へのループも可能である.どちらの形式もサポートされています.

@charset "utf-8";//                 
$name: for !default;
//          ,     ,   for(var $e = 5; $e >= 1; $e--){}
@for $e from 5 through 1 {
    .#{$name}-#{$e}{
        width: 60px + $e;
    }
}
//------------------------------
.for-5 {
  width: 65px; }

.for-4 {
  width: 64px; }

.for-3 {
  width: 63px; }

.for-2 {
  width: 62px; }

.for-1 {
  width: 61px; }

@eachは配列とオブジェクトを巡回するために使用されます.
配列を巡る場合,@eachは要素の変数名に従い,任意に,in,最後に配列名に続く.

@charset "utf-8";//                 
$list: adam john wynn mason kuroir;

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}
//------------------------------
.author-bio .photo-adam {
  background: url("/images/avatars/adam.png") no-repeat; }
.author-bio .photo-john {
  background: url("/images/avatars/john.png") no-repeat; }
.author-bio .photo-wynn {
  background: url("/images/avatars/wynn.png") no-repeat; }
.author-bio .photo-mason {
  background: url("/images/avatars/mason.png") no-repeat; }
.author-bio .photo-kuroir {
  background: url("/images/avatars/kuroir.png") no-repeat; }
//================================

@charset "utf-8";//                 
//      
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//-------------------------------
.puma-icon {
  background-image: url("/images/puma.png");
  border: 2px solid black;
  cursor: default; }

.sea-slug-icon {
  background-image: url("/images/sea-slug.png");
  border: 2px solid blue;
  cursor: pointer; }

.egret-icon {
  background-image: url("/images/egret.png");
  border: 2px solid white;
  cursor: move; }

@charset "utf-8";//                 
$icon-glass: "\f000";//    ICON  
$icon-music: "\f001";
$icon-search: "\f002";
$icon-envelope-o: "\f003";
$icon-heart: "\f004";
$icon-star: "\f005";
$icon_names: icon-glass icon-music icon-search icon-envelope-o icon-heart icon-star;
$icon_vars: $icon-glass $icon-music $icon-search $icon-envelope-o $icon-heart $icon-star;

@each $name in $icon_names {
    $i: index($icon_names, $name);
    .#{$name} {
        content: nth($icon_vars, $i);
    }
}
//------------------------------
.icon-glass {
  content: "\f000"; }

.icon-music {
  content: "\f001"; }

.icon-search {
  content: "\f002"; }

.icon-envelope-o {
  content: "\f003"; }

.icon-heart {
  content: "\f004"; }

.icon-star {
  content: "\f005"; }

上の最適化版

@charset "utf-8";//                 
$icons:
    glass "\f000",
    music "\f001",
    search "\f002",
    envelope-o "\f003",
    heart "\f004",
    star "\f005"
    ;//    2   

@function get-icon($icon-name){//       ,            
    @each $icon in $icons {
        @if nth($icon, 1) == $icon-name {
            @return nth($icon,2);
        }
    }
}

.icon-glass {
    content: get-icon(glass);
}
//------------------------------
.icon-glass {
  content: "\f000"; }

@charset "utf-8";//                 
$icons: (
    glass :"\f000",
    music: "\f001",
    search: "\f002",
    envelope-o: "\f003",
    heart: "\f004",
    star: "\f005"
);
@function get-icon($icon-name){//       ,            
   @return map-get($icons, $icon-name);
}

.icon-glass {
    content: get-icon(glass);
}
//------------------------------
.icon-glass {
  content: "\f000"; }

オブジェクトを巡回する場合は、キー名とキー値、カンマで区切られ、in、最後にオブジェクト名の2つの変数が続きます.

@charset "utf-8";//                 
@each $key, $val in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$key} {
    font-size: $val;
  }
}
//------------------------------
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.5em; }

h3 {
  font-size: 1.2em; }

@whileはJSのwhileによく似ています

@charset "utf-8";//                 
$types: 4;
$type-width: 20px;

@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}
//------------------------------
.while-4 {
  width: 24px; }

.while-3 {
  width: 23px; }

.while-2 {
  width: 22px; }

.while-1 {
  width: 21px; }

今日はここまでにしましょう.みんな見て、CSSを書くことを期待しないでください.まだいくつかの重要な概念が紹介されていないからです.しかし、私たちが今知っていることだけで、lessを学んだ人にとって、本当にショックです.明らかに、使いやすさ、機能などの面からlessに勝っている.
to be continue...