萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS框架sass的簡單一覽

CSS框架sass的簡單一覽

   sass結尾的文件有著更嚴格的格式要求,scss文件更貼近原生css

  比如sass文件

  CSS Code復制內容到剪貼板

  #main

  color: #fff

  &-sidebar

  border: 1px solid

  等同於scss的

  CSS Code復制內容到剪貼板

  #main {

  color: black;

  &-sidebar { border: 1px solid; }

  }

  編譯後為

  其中代表父級元素的& 只可出現在頭部,否則解析不出來。

  嵌套屬性

  CSS Code復制內容到剪貼板

  .funky {

  font: {

  family: fantasy;

  size: 30em;

  weight: bold;

  }

  }

  編譯為

  CSS Code復制內容到剪貼板

  .funky {

  font-family: fantasy;

  font-size: 30em;

  font-weight: bold; }

  這個在一些復雜的css3屬性上用處比較大,比如animate

  字符串內插

  使用#{}作為選擇器變量

  CSS Code復制內容到剪貼板

  $name: foo;

  $attr: border;

  p.#{$name} {

  #{$attr}-color: blue;

  }

  p {

  $font-size: 12px;

  $line-height: 30px;

  font: #{$font-size}/#{$line-height};

  }

  第二個例子如果不用字面量則12除30

  運算符

  CSS Code復制內容到剪貼板

  p {

  width: 1in + 8pt;

  }

  單位如果可以轉換,會被自動轉換

  編譯為:

  CSS Code復制內容到剪貼板

  p {

  width: 1.111in; }

  p {

  font: 10px/8px; // Plain CSS, no division

  $width: 1000px;

  width: $width/2; // Uses a variable, does division

  width: round(1.5)/2; // Uses a function, does division

  height: (500px/2); // Uses parentheses, does division

  margin-left: 5px + 8px/2px; // Uses +, does division

  }

  直接字面量,變量使用,函數,括號,優先級

  以上編譯為

  CSS Code復制內容到剪貼板

  p {

  font: 10px/8px;

  width: 500px;

  height: 250px;

  margin-left: 9px;

  }

  顏色:

  CSS Code復制內容到剪貼板

  p {

  color: #010203 + #040506;//相加 rbg三位分別相加

  color: #010203 * 2;//相乘

  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);//帶alpha通道的疊加

  color: opacify($translucent-red, 0.3);//控制透明的函數,加強非透明

  background-color: transparentize($translucent-red, 0.25); //控制透明的函數,加強透明

  }

  默認變量:

  CSS Code復制內容到剪貼板

  $content: "First content";

  $content: "Second content?" !default;

  $new_content: "First time reference" !default;

  #main {

  content: $content;

  new-content: $new_content;

  }

  !default 如變量被賦值使用之前的賦值,沒被賦值,賦值

copyright © 萬盛學電腦網 all rights reserved