學習Sass 的基本語法規則[Sass和compass學習筆記]

自從發現可編程的css語法 Sass和基於Sass的css庫compass

一個給個人感受像c# 另一個給個人感受像.NET Framework，一切都爲了提高開發效率和下降開發大型web的門檻。

當web開發趨勢邁進WebApi+Js 時代，compass和Sass 會不會成爲web開發的標配？這個得實際開發檢驗下.

預處理

當web站點變的愈來愈複雜。

先是html 複雜了----》動態編程語言解決方案

js複雜了---》jq和dojo 等解決方案

css如今也變的複雜了，可是css自己沒有編程的功能，因此面向css預處理的中間件出現了，想compass和Sass這種想編寫程序同樣編寫css，而後經過預處理，處理爲瀏覽器能夠解析的css，下降了構建更增強大的web站點複雜度。

變量

變量和js、c# 裏面的變量差很少，都是用來存儲東西了，我這樣的菜鳥寫css，最頭疼一次修改好多高度，顏色等等，有了變量，即便是最笨的方法，編寫css也比之前快多了了

在 sass 裏面變量的標識符是$,話說和jq是同樣的標識符呢

例如

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

這樣編寫的sass版的css在通過compass預處理後是能夠正常解析的css，並且每一行還會有行號，用於對照比較，剛開始很是擔憂處理前和處理後如何聯繫到一塊兒，排查BUG，後來發現有行號，so 方便

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

嵌套和做用域

之前寫css，最蛋疼的就是 css默認規則是一行一行的，BUT css超過一屏幕，我就搞不清楚這些css 是怎麼個關係。。。

如今好了 有{} 嵌套和做用域，像寫程序同樣寫css

納尼，做用域？上面都有了變量跟定得有做用域，不知道做用域的，百度下

sass 的嵌套 和預處理後的css 是按照html對css的繼承和處理規則來的，看着比之前舒服多了

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

預處理後 是這樣的

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

對於做用域，官方的demo 沒有解釋，這個是在書裏面看到的

例如

div{
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
}

li{
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
}

在不一樣 {} 做用域內的變量互不影響

模塊

看到這個單詞 Partials,真的是喜極而泣啊,之前隨便打開一個css文件都是1k行以上,本菜鳥在裏面看代碼,就好像在迷宮裏面迷路同樣,

sass的模塊化是將須要模塊化的css放在一個如下劃線開始的單獨的文件裏面例如_partial.scss,使用這個模塊的時候用@import導入便可

不支持模塊化css的css框架都是耍流氓!

 

Import 導入模塊

在css中使用一個Import 便會像服務器端發起一個請求,在sass中使用Import,compass 能夠導入一個模塊,並且會合並這個導入的文件.

例如, 重置瀏覽器默認樣式的模塊

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

導入是這樣導入的

/* base.scss */

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

生成的css 是瀏覽器能夠解析的,並且帶行號,方便對比

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

sass 中的函數方法--Mixins

函數 有函數名 參數 可選選參數,返回值等

在sass中 這些通通都有!具體我還在看書,這是官方的demo,足以發現mixins 是挺好用的

定義一個方法

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

使用一個方法

.box { @include border-radius(10px); }

能夠發現用@mixin開頭 後跟方法 名稱 括號內爲參數,{}中間爲返回內容,

使用@include 後跟方法名和括號，即可以調用這個方法

compass預處理後 生成的css以下

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

繼承

此繼承爲sass組織代碼的繼承規則，非html解析和呈現css時候的繼承規則，不要搞混了。。。，雖然生成的代碼符合css繼承規則。。。。。。

繼承 使用的關鍵字是@extend，使用很簡單，來看一個官方的demo

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

預處理後生成的代碼

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

操做符

sass 支持+、-、*、/、% 加減乘除和求餘，是在是太勁爆了，這樣在寫寬度和高等等地方有更加方便了

看看官方的demo

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

預處理後的代碼

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 62.5%;
}

aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}