scss入門

變量

聲明

$highlight-color: #F90;


$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

作用域

• 與CSS屬性不同，變量可以在css規則塊定義之外存在。當變量定義在css規則塊內，那麼該變量只能在此規則塊內使用

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯後

nav {
  width: 100px;
  color: #F90;
}

嵌套

一般寫法

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

//編譯後
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父級選擇器 $

• $ 代表父選擇器

article a {
  color: blue;
  &:hover { color: red }
}

//編譯後
article a { color: blue }
article a:hover { color: red }

羣組選擇器

.container h1, .container h2, .container h3 {
	margin-bottom: .8em 
}

//可簡寫成---->
.container {
  h1, h2, h3 {margin-bottom: .8em}
}

//或者
nav, aside {
  a {color: blue}
}  //---->
nav a, aside a {color: blue}

>、+和~的用法----同 css 中用法

• > 選擇直接子元素

article > section { border: 1px solid #ccc } //擇article下緊跟着的子元素section

• + 選擇同級元素

header + p { font-size: 1.1em } //選擇header元素後緊跟的p元素：

• ~

article ~ article { border-top: 1px dashed #ccc } // 擇所有跟在article後的同層article元素，不管它們之間隔了多少其他元素

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
//編譯後
artical ~ artical{border-top: 1px dashed #ccc }
artical > section{ background: #eee }
artical dl > dt{color: #333}
artical dl > dd{color: #333}
nav + artical { margin-top: 0 }

屬性嵌套

• sass可以做到嵌套屬性，比較典型的是border-xxx屬性

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

//編譯後
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

• 甚至可以部分嵌套屬性

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//編譯後
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

導入

默認值

• 最後一次聲明會覆蓋前面的值
• 通過!default設置默認值

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}
//如果在導入之前聲明瞭一個$fancybox-width變量，那麼你的局部文件中對$fancybox-width賦值400px的操作就無效。如果沒有，則$fancybox-width將默認爲400px

混合器

一般用法

• 變量適用於處理css複雜度較小的情況，比如更改顏色，寬高等
• 混合器用於定義一段重複的樣式

//定義一段css通用樣式scss  ---->@mixin
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//使用-----> @include
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

//sass最終生成：
.notice {
  background-color: green;
  border: 2px solid #00aa00;
    
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器中的css規則

• 混合其中可以包含css選擇器

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
}

//編譯後

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器傳參

• 與js的function相似

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

• 有時候會很難區分每個參數是什麼意思，參數之間是一個什麼樣的順序。爲了解決這個問題，sass允許通過語法$name: value的形式指定每個參數的值

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

• 默認傳參

@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

繼承

//通過選擇器繼承繼承樣式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

• .seriousError將會繼承樣式表中任何位置處爲.error定義的所有樣式。

• class="seriousError" 修飾的html元素最終的展示效果就好像是class="seriousError error"。

• .seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承