CSS 系列 -- scss 語法、less 語法

前言

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

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

因而有人就開始爲CSS加入編程元素，這被叫作"CSS預處理器"(css preprocessor)。它的基本思想是，用一種專門的編程語言，進行網頁樣式設計，而後再編譯成正常的CSS文件。

在衆多的CSS預處理器中，scss、less 這兩種用得最多，因此掌握其語法對於咱們來講顯得很重要，學會靈活運用比咱們單純用CSS要高效得多

Scss 語法

簡言之能夠理解scss是sass的一個升級版本，徹底兼容sass以前的功能和新增一些能力3

1. 變量

SASS的全部變量以$開頭

$blue : #1875e7;　
div {
　color : $blue;
}
複製代碼

使用場景：顏色常常得重複使用，且顏色值使用RGB、十六進制時要麼去記，要麼每次都去複製粘貼，這樣就顯得很麻煩，因此咱們能夠用變量代替，寫代碼的時候會更加的迅速

2. 嵌套

SASS容許選擇器嵌套：（相比於CSS，這一點就使得代碼的邏輯更加清晰了）

div {
　hi {
　　color:red;
　}
}
複製代碼

屬性也能夠嵌套，好比使用border的衆多屬性，能夠寫成：

p {
　border: {
    color: red;
    radius: 5px;
　}
}
複製代碼

3. 繼承

SASS容許一個選擇器，繼承另外一個選擇器。好比，現有class1：

.class1 {
  border: 1px solid #ddd;
}
複製代碼

class2要繼承class1，就要使用@extend命令：

.class2 {
　@extend .class1;
  font-size: 120%;
}
複製代碼

4. 模塊複用、傳參

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

@mixin left {
  float: left;
  margin-left: 10px;
}
複製代碼

使用@include命令，調用這個代碼塊

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); }
複製代碼

5. 運算

SASS容許在代碼中使用算式：

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

6. 條件語句

@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;
}
複製代碼

7. 循環語句

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");
　}
}
複製代碼

8. 自定義函數

SASS容許用戶自定義函數

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

#sidebar {
　width: double(5px);
}
複製代碼

less 語法

1. 變量

@width: 10px; 
@height: @width + 10px; 
#header { 
  width: @width; 
  height: @height; 
}
複製代碼

將被編譯爲：

#header { 
  width: 10px; 
  height: 20px; 
}
複製代碼

2. 嵌套

#header { 
  color: black; 
  .navigation { 
    font-size: 12px; 
  } 
  .logo { 
    width: 300px; 
  } 
}
複製代碼

若是用到僞類選擇器，能夠使用&來表示當前選擇器的父級

.clearfix { 
  display: block; 
  zoom: 1; 
  &:after { 
    content: " "; 
    display: block; 
    font-size: 0; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
  } 
}
複製代碼

媒體查詢@media（@規則中的一種）也能夠看做選擇器同樣進行嵌套

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

// 會被編譯爲：

.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}
@media (min-width: 1280px) {
  .component {
    width: 800px;
  }
}
複製代碼

3. 變量做用域

先在當前選擇器裏面尋找變量和混合（mixins），若是找不到，則從「父」級做用域繼承

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}
複製代碼

3. 模塊複用

// 定義模塊
.bordered { 
  border-top: dotted 1px black; 
  border-bottom: solid 2px black; 
}
// 使用模塊
#menu a { 
  color: #111; 
  .bordered(); 
} 
.post a { 
  color: red; 
  .bordered(); 
}
複製代碼

4. 運算

算術運算符 +、-、*、/ 能夠對任何數字、顏色或變量進行運算。若是可能的話，算術運算符在加、減或比較以前會進行單位換算。計算的結果以最左側操做數的單位類型爲準。

// 全部操做數被轉換成相同的單位
@conversion-1: 5cm + 10mm; // 結果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm

// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 結果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 結果是 10%
@other: @base + @filler; // 結果是 15%
複製代碼

5. 函數

Less 內置了多種函數用於轉換顏色、處理字符串、算術運算等。這些函數在Less 函數手冊中有詳細介紹。

函數的用法很是簡單。下面這個例子將介紹如何利用 percentage 函數將 0.5 轉換爲 50%，將顏色飽和度增長 5%，以及顏色亮度下降 25% 而且色相值增長 8 等用法：

@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
複製代碼

安裝使用

scss 安裝指南

經過 npm 安裝

npm install sass -g
複製代碼

less 安裝指南

經過 npm 安裝

npm install less -g
複製代碼

瀏覽器使用

<script src="less.js" type="text/javascript"></script>
複製代碼

寫在最後

有些語法看起來顯得有些雞肋，但先學着，或者收藏起來做教程文檔，等之後遇到需求也許就用獲得了呢

參考文章

• sass 用法指南
• sass 官方文檔
• less.js 中文文檔
• sass 與 scss 的區別