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監聽某個檔案或目錄,一旦原始檔有變動,就自動生成編譯後的版本。
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
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;
}
}
屬性也可以巢狀,比如border-color屬性,可以寫成:
p {
border: {
color: red;
}
}
注意,border後面必須加上冒號。
在巢狀的程式碼塊內,可以使用&引用父元素。比如a:hover偽類,可以寫成:
a {
&:hover { color: #ffb3ff; }
}
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);
}
下面是一個mixin的例項,用來生成瀏覽器字首。
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
使用的時候,可以像下面這樣呼叫:
#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px); }
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);
}
(完)
以上轉自:http://www.ruanyifeng.com/blog/2012/06/sass.html
使用sublime外掛進行編譯:下載sass和sass build外掛,完成scss檔案後,按ctrl+shift+B進行編譯,儲存為css檔案,之後每次修改完scss檔案,儲存後按ctrl+B進行編譯,會直接修改對應的css檔案。
相關推薦
SASS用法指南
inpu .html 安裝 sta func 處理器 radi 直接 div http://www.ruanyifeng.com/blog/2012/06/sass.html 學過CSS的人都知道,它不是一種編程語言。 你可以用它開發網頁樣式,但是沒法用它編程。也就是說,C
SASS用法
一、什麼是SASSSASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。本文總結了SASS的主要用法。我的目標是,有了這篇文章,日常的一般使用就不需要去看官方文件了。二、安裝和使用2.1 安裝SASS是Ruby語言寫
sass用法總結
你可以用它開發網頁樣式,但是沒法用它程式設計。也就是說,CSS基本上是設計師的工具,不是程式設計師的工具。在程式設計師眼裡,CSS是一件很麻煩的東西。它沒有變數,也沒有條件語句,只是一行行單純的描述,寫起來相當費事。 很自然地,有人就開始為CSS加入程式設計元
CSS框架-SASS 用法指南
一、什麼是SASS SASS是一種CSS的開發工具,提供了許多便利的寫法,大大節省了設計者的時間,使得CSS的開發,變得簡單和可維護。 本文總結了SASS的主要用法。我的目標是,有了這篇文章,日常的一般使用就不需要去看官方文件了。 二、安裝和使用 2.1 安裝 SASS是R
Sass的一些常用的用法
1. Sass 是 CSS 的擴充套件語言。允許使用變數,嵌入規則以及更多的語法使CSS更加的強大,更易於組織,執行速度更快,css的預編譯語言。 2. Sass的一種語法也叫做Scss 3.Sass的預處理:瀏覽器是不識別sass的,在此之前我們應該採用一些工具來對sass進行編譯 (
SASS基本用法
變數($Variable) 變數以$開頭,既可以用於選擇器(Selector),也可以用於屬性(Property)和屬性值(Value)。 當用於屬性值時,通常可以直接引用;當用於選擇器、屬性和某些複雜屬性值(e.g. font-size/line-heig
SCSS & SASS Color 顏色函式用法
最近做一個沒有設計師參與的專案,發現 scss 內建的顏色函式還挺好用。記錄分享下 rgba() 能省掉手工轉換 hex 到 rgb 格式的工作,如以下 SCSS 程式碼 $linkColor: #20a0ff; .box{ box-shadow: 0 2px 6px 0 rgba($
SASS 特殊用法集
學過CSS的人都知道,它不是一種程式語言。 你可以用它開發網頁樣式,但是沒法用它程式設計。也就是說,CSS基本上是設計師的工具,不是程式設計師的工具。在程式設計師眼裡,CSS是一件很麻煩的東西。它沒有變數,也沒有條件語句,只是一行行單純的描述,寫起來相當費事。 很自然地,有人就開始為CSS加入程式設計元素
Sass高階用法(2)
上篇文章我們介紹了Sass的日常使用方法,今天我們來介紹Sass的高階用法,這將會顛覆你對寫css的印象。 條件語句 判斷:@if 和@else 當 @if 的表示式返回值是true時,則輸出 {} 內的程式碼 div { @if 1 + 1
sass 常用用法筆記
本文轉載於:猿2048網站sass 常用用法筆記 最近公司開發的h5專案,需要用到sass,所以領導推薦讓我去阮一峰大神的SAS
Mysql的limit用法
blog images 顯示 log cor 用法 .cn alt nbsp limit可以用來顯示從m條記錄開始的n條記錄,具體語句如下: select * from table_test limit 0,10; #顯示從0開始的10條記錄(表中的第一條記錄下標為0
matlab中size函數用法
matlab 元素 size(A)函數是用來求矩陣的大小的。比如說一個A是一個3×4的二維矩陣:1、size(A) %直接顯示出A大小輸出:ans=3 42、s=size(A)%返回一個行向量s,s的第一個元素是矩陣的行數,第二個元素是矩陣的列數輸出:s=3 43、[r,c]=size(A)%將矩陣A
ng-repeat循環遍歷的用法
-i -a 打印 用法 ini in use bin 循環 bsp ng-repeat循環遍歷的用法 <script src="../angular-1.5.5/angular.min.js"></script></head>&l
select ipnut雙向數據綁定用法
ini 綁定 pan type tex mod name select ng-bind <script src="../angular-1.5.5/angular.min.js"></script></head><body n
sed用法——在指定行後面添加內容
ccie style cisc inux security txt 用法 color 添加內容 文檔內容如下: # cat 123.txt linuxciscohuaweinetworksystem 1. 使用sed命令在cisco行下面添加CCIE; # sed -i "
分針網——IT教育:jquery選擇器的用法
jQuery選擇器是jQuery庫的一大特色,用這些選擇器不但可以省去繁瑣的JavaScript 書寫方式,還可以節省時間和效率,正是有這些jQuery選擇器,才讓我們更容易的操作JavaScript的dom。 1. 基本選擇器 ·#id 根據
數字精確運算BigDecimal經常用法
round lin -s span hal pri mil size return import java.math.BigDecimal; public class Arith { /** * 因為Java的簡單類型不可以精確的對浮點數進行運算,這個工具類提
python argpare 模塊的簡單用法
python1、實例:#!/usr/bin/python #coding:utf-8 import argparse parser = argparse.ArgumentParser() parser.add_argument(‘-s‘,‘--string‘,dest=‘string‘,nargs=1
shape的基本用法
enc schema 顏色 顏色漸變 mas utf pad 半徑 start <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/
Sql語句——刪除表數據drop、truncate和delete的用法
行數據 const 數值 rain dml ble 可能 如果 sql語句 一、SQL中的語法 1、drop table 表名稱 eg: drop table dbo.Sys_Test 2、truncate tab