~米漿牛奶~

sass:寫css的一種程式語言,能更快速寫css

scss:在css3出來後延伸sass版本,與sass差別在有{}和;

載入scss檔

@import "檔名";

巢狀結構

父標籤子標籤範例
在scss檔
.con {
   ....
  h2 {
      ....
  }
  p {
      ....
  }
}
翻成css檔
.con {
   ...
}
.con h2 {
   ...
}
.con p {
   ...
}
屬性範例
在scss檔
.btn {
    text: {
         decoration:underline;
         transform:lowercase;
    }
}
翻成css檔
.btn {
     text-decoration:underline;
     text-transform:lowercase;
}

&代表父親

class範例
在scss檔
.con {
      ...
    .cat {
       ...
    }
    &.can {
       ...
    }
}
翻成css檔
.con {
    ...
}
.con .cat {
    ...
}
.con.con {
    ...
}
動作範例
在scss檔
a {
   ...
  &:hover {
      ...
  }
  &:active {
      ...
  }
}
翻成css檔
a {
    ...
}
a:hover {
    ...
}
a:active {
    ...
}
後面運用範例
在scss檔
.sa {
   ...
   .ua & {
      ...
   }
}
翻成css檔
.sa {
    ...
}
.ua .sa {
    ...
}

scss參考網址:http://blog.visioncan.com/2011/sass-scss-your-css/

變數

$變數名稱

運用$範例
在scss檔
$b-color:yellow;
a {
    color:$b-color;
}
翻成css檔
a {
    color:yellow;
}

$變數能設定屬性的值,也能僅設定一個屬性之中一個值
$變數在{}內又定義新值會改變當初全域預設值

#{$變數}

運用#範例
在scss檔
$sa:top;
sup-#{$sa} {
    position:relative;
    #{$sa}:-0.5em;
}
翻成css檔
sup-top {
    position:relative;
    top:-0.5em;
}

#{$變數}能用來連接選擇標籤,屬性名稱或字串

Mixin

@mixin

運用@mixin範例
在scss檔
@mixin fun {
     $a:10px;
     margin-left:$a;
}
div {
     @include fun;
}
翻成css檔
div {
     margin-left:10px;
}

@mixin傳入參數範例
在scss檔
@mixin fun($a) {
     margin-left:$a;
}
div {
     @include fun(10px);
}
翻成css檔
div {
     margin-left:10px;
}

@mixin傳入多參數範例
在scss檔
@mixin fun($a...) {
     transition:$a;
}
div {
    @include fun(color 0.3s ease-in,background 0.5s ease-out);
}
翻成css檔
div {
     transition:color 0.3s ease-in,background 0.5s ease-out;
}

@mixin預設參數範例
在scss檔
@mixin fun($a:10px) {
     margin-left:$a;
}
div {
    @include fun;
}
div2 {
    @include fun(15px);
}
翻成css檔
div {
    margin-left:10px;
}
div2 {
    margin-left:15px;
}

@mixin根據關鍵字傳值範例
在scss檔
@mixin fun($a:10px,$b:10px) {
    margin-left:$a;
    padding:$b;
}
div {
    @include fun($b:20px,$a:5px);
}
翻成css檔
div {
    margin-left:5px;
    padding:20px;
}
接著我試著把上方改成
在scss檔
@mixin fun($a:5px,$b) {
    margin-left:$a;
    padding:$b;
}
div {
    @include fun($b:10px,$a:5px);
}
翻成css檔
錯誤:
Required argument $b must come before any optional arguments.
傳入參數$b必須有對應參數

簡單來說@mixin傳入參數組中如有一個預設值,那大家都要有,否則都無

Extend

@extend

運用@extend範例
在scss檔
.ex_a {
    font-size:1em;
}
.b {
   @extend .ex_a;
    background:#ff0;
}
翻成css檔
.ex_a,
.b {
   font-size:1em;
}
.b {
   background:#ff0;
}

@extend巢狀範例
在scss檔
.ex_a {
   font-size:1em;
   h2 {
      font-size:2em;
   }
}
.b {
   @extend .ex_a;
    background:#ff0;
}
翻成css檔
.ex_a,
.b {
    font-size:1em;
}
.ex_a h2,
.b h2 {
    font-size:2em;
}
.b {
    background:#ff0;
}

function

@function

運用@function範例
在scss檔
@function b($target,$context) {
      @return ($target/$context)*100%;
}
.sidebar {
      width:b(350px,1000px);
}
翻成css檔
.sidebar {
     width:35%;
}
@function其實跟@mixin一樣

@if,@else if,@else
運用範例
在scss檔
$theme:dark;
header {
    @if $theme == dark {
          background:#000;
    } @else if $theme != black {
          background:pink;
    } @else {
          background:#fff;
    }
}
翻成css檔
header {
    background:#000;
}

其他常用

@each

運用@each範例
在scss檔
$authors:mile ann;
@each $author in $authors {
      .author-#{$author} {
          background:url(author-#{$author}.jpg);
      }
}
翻成css檔
.author-mile{
    background:url(author-mile.jpg);
}
.author-ann{
    background:url(author-ann.jpg);
}

@for

運用@for範例
在scss檔
.item {
   position:absolute;
   right:0;
  @for $i from 1 through 3 {
         &.item-#{$i} {
            top:$i*30px;
         }
    }
}
翻成css檔
.item {
    position:absolute;
    right:0;
}
.item.item-1 {
    top:30px;
}
.item.item-2 {
    top:60px;
}
.item.item-3 {
    top:90px;
}

@while

運用@while範例
在scss檔
$i:1;
.item {
    position:absolute;
    right:0;
   @while $i < 4 {
        &.item-#{$i} {
            top:$i*30px;
        }
        $i:$i+1;
    }
}
翻成css檔
.item {
   position:absolute;
   right:0;
}
.item.item-1 {
   top:30px;
}
.item.item-2 {
   top:60px;
}
.item.item-3 {
   top:90px;
}

數學與顏色

round($number):4.4=4 4.5=5

ceil($number): 1.2=2

floor($number): 1.2=1

abs($number):|-4|=4

percentage($number):30/100=30%

min($list):在清單中找最小

max($list):在清單中找最大

lighten($color,亮度%)

darken($color,暗度%)

saturate($color,飽和%)

desaturate($color,不飽和%)

mix($color1,$color2,預設合成軸50%)
%越大越往$color1,越小越往$color2
在scss檔
.mix-a {
     color:mix(yellow,blue);
}
.mix-b {
     color:mix(yellow,blue,50%);
}
.mix-c{
     color:mix(yellow,blue,0%);
}
.mix-d{
     color:mix(yellow,blue,100%);
}
翻成css檔
.mix-a {
   color: #7f7f7f;
}

.mix-b {
   color: #7f7f7f;
}

.mix-c {
   color: blue;
}

.mix-d {
   color: yellow;
}

線上轉css版:http://sassmeister.com/

互動式

@media

運用@media範例
在scss檔
.sa {
    border:10px;
    @media (min-width:700px) {
         float:right;
        width:30%;
     }
}
翻成css檔
.sa {
    border:10px;
}
@media (min-width:700px) {
     .sa {
         float:right;
        width:30%;
     }
}

@content

運用@content範例
在scss檔
@mixin re($val,$me) {
      @media ($val:$me) {
             @content
      }
}
.sa {
    border:10px;
   @include re(min-width,900px) {
          float:right;
          width:30%;
    }
}
翻成css檔
.sa {
    border:10px;
}
@media (min-width:900px) {
       .sa {
           float:right;
           width:30%;
       }
}

Compass

Compass:撰寫Sass/Scss的外掛包,據說比Sass/Scss更威猛

以下為形容圖((燦笑

我仍愛當新兵CSS,因為不會忘了語法

載入compass
@import "compass"

威猛例子-瀏覽器

在scss檔
@import "compass"
.content {
     @include box-sizing(border-box);
}
翻成css檔
.content {
     -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
     box-sizing:border-box;
}

威猛例子-全域變數

在scss檔
@import "compass"
$color:yellow;
a {
    color:$color;
}
#t1 {
    color:$color;
}
如果想改$color直接在最上方宣告那改變即可

Compass參考網址:http://blog.mukispace.com/compass-for-html-code-project/

Compass CSS參考網址:http://compass-style.org/reference/compass/css3/