Question to say "I can!"

SASS用法指南

2012-06-20

原文:阮一峰——SASS用法指南

 

學過CSS的人都知道,它不是一種編程語言。

你可以用它開發網頁樣式,但是沒法用它編程。也就是說,CSS基本上是設計師的工具,不是程序員的工具。在程序員眼里,CSS是一件很麻煩的東西。它沒有變量,也沒有條件語句,只是一行行單純的描述,寫起來相當費事。

很自然地,有人就開始為CSS加入編程元素,這被叫做"CSS預處理器"(css preprocessor)。它的基本思想是,用一種專門的編程語言,進行網頁樣式設計,然后再編譯成正常的CSS文件。

各種"CSS預處理器"之中,我自己最喜歡SASS,覺得它有很多優點,打算以后都用它來寫CSS。下面是我整理的用法總結,供自己開發時參考,相信對其他人也有用。

============================================

SASS用法指南

作者:阮一峰

一、什么是SASS

SASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。

本文總結了SASS的主要用法。我的目標是,有了這篇文章,日常的一般使用就不需要去看官方文檔了。

二、安裝和使用

2.1 安裝

SASS是Ruby語言寫的,但是兩者的語法沒有關系。不懂Ruby,照樣使用。只是必須先安裝Ruby,然后再安裝SASS。

假定你已經安裝好了Ruby,接著在命令行輸入下面的命令:

  gem install sass

然后,就可以使用了。

2.2 使用

SASS文件就是普通的文本文件,里面可以直接使用CSS語法。文件后綴名是.scss,意思為Sassy CSS。

下面的命令,可以在屏幕上顯示.scss文件轉化的css代碼。(假設文件名為test。)

  sass test.scss

如果要將顯示結果保存成文件,后面再跟一個.css文件名。

  sass test.scss test.css

SASS提供四個編譯風格的選項:

  * nested:嵌套縮進的css代碼,它是默認值。

* expanded:沒有縮進的、擴展的css代碼。

* compact:簡潔格式的css代碼。

* compressed:壓縮后的css代碼。

生產環境當中,一般使用最后一個選項。

  sass --style compressed test.sass test.css

SASS的官方網站,提供了一個在線轉換器。你可以在那里,試運行下面的各種例子。

三、基本用法

3.1 變量

SASS允許使用變量,所有變量以$開頭。

  $blue : #1875e7;

div {
color : $blue;
}

如果變量需要鑲嵌在字符串之中,就必須需要寫在#{}之中。

  $side : left;

.rounded {
border-#{$side}-radius: 5px;
}

3.2 計算功能

SASS允許在代碼中使用算式:

  body {
margin: (14px/2);
top: 50px + 100px;
right: $var * 10%;
}

3.3 嵌套

SASS允許選擇器嵌套。比如,下面的CSS代碼:

  div h1 {
color : red;
}

可以寫成:

  div {
hi {
color:red;
}
}

屬性也可以嵌套:

  p {
border-color: red;
}

可以寫成:

  p {
border: {
color: red;
}
}

注意,border后面必須加上冒號。

3.4 注釋

SASS共有兩種注釋風格。

標準的CSS注釋 /* comment */ ,會保留到編譯后的文件。

單行注釋 // comment,只保留在SASS源文件中,編譯后被省略。

四、代碼的重用

4.1 繼承

SASS允許一個選擇器,繼承另一個選擇器。比如,現有class1:

  .class1 {
border: 1px solid #ddd;
}

class2要繼承class1,就要使用@extend命令:

  .class2 {
@extend .class1;
font-size:120%;
}

4.2 Mixin

Mixin有點像C語言的宏(macro),是可以重用的代碼塊。

使用@mixin命令,定義一個代碼塊。

  @mixin left {
float: left;
margin-left: 10px;
}

使用@include命令,調用這個mixin。

  div {
@include left;
}

mixin的強大之處,在于可以指定參數和缺省值。

  @mixin left($value: 10px) {
float: left;
margin-right: $value;
}

使用的時候,根據需要加入參數:

  div {
@include left(20px);
}

4.3 顏色函數

SASS提供了一些內置的顏色函數,以便生成系列顏色。

  lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

4.4 插入文件

@import命令,用來插入外部文件。

  @import("path/filename.scss");

如果插入的是.css文件,則等同于css的import命令。

  @import "foo.css";

五、高級用法

5.1 條件語句

@if可以用來判斷:

  p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
}

配套的還有@else命令:

  @if lightness($color) > 30% {
background-color: #000;
} @else {
background-color: #fff;
}

5.2 循環語句

SASS支持for循環:

  @for $i from 1 to 10 {
.border-#{$i} {
border: #{$i}px solid blue;
}
}

也支持while循環:

  $i: 6;

@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}

each命令,作用與for類似:

  @each $member in a, b, c, d {
.#{$member} {
background-image: url("/image/#{$member}.jpg");
}
}

5.3 自定義函數

SASS允許用戶編寫自己的函數。

  @function double($n) {
@return $n * 2;
}

#sidebar {
width: double(5px);
}

(完)

作者:admin | Categories:設計問題 | Tags:

發表評論

電子郵件地址不會被公開。 必填項已用*標注

*

澳洲f1赛车b盘开奖套路 浩物股份股票 上海天天彩选4历史开奖号码 腾讯分分彩官网首选 黑龙江6十1 排列五宗合板走势图 河北11选5任五推荐号 股票融资操作 广东快乐10分网上投注 重庆时时彩软件urssc 山东快乐扑克3开奖结果 幸运飞艇稳赢图片 陕西11选5电子走势图 股票配资平台 湖北快3软件下载 怎么知道是不是权重股 排列五开奖走势图走