Sass

mating 發(fā)布于2019-08-29 12:39 / 1087人閱讀

摘要：用法指南阮一峰官方文檔安裝安裝編譯選項(xiàng)編譯格式添加調(diào)試開啟信息變量計(jì)算嵌套使用引用父元素注釋繼承可重用代碼塊。指定參數(shù)和缺省值顏色函數(shù)插入文件條件語(yǔ)句循環(huán)語(yǔ)句自定義函數(shù)

Sass

Sass用法指南 - 阮一峰

官方文檔

安裝

安裝ruby

gem install sass

編譯選項(xiàng)

// 編譯格式
sass --watch input.scss:output.css --style compact
// 添加調(diào)試map
sass --watch input.scss:output.css --sourcemap
// 開啟debug信息
sass --watch input.scss:output.css --debug-info

變量

$blue : #1875e7;
div {
  color : $blue;
}

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

計(jì)算

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

嵌套

div h1 {
  color: red;
}

div {
  h1 {
    color: red;
  }
}

p {
  border: {
    color: red;
  }
}

a {
  &:hover { color: #ffb3ff; }
}
/* 使用&引用父元素 */

注釋

/* comment */

// comment

/*!
    important comments!
*/

繼承

.class1 {
  border: 1px slid #ffffd;
}

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

Mixin

可重用代碼塊。

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

div {
  @include left;
}

指定參數(shù)和缺省值：

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

div {
  @include left(20px);
}

example：

@mixin rounded($vert, $horz, $radius: 10px) {
  border-#{$vert}-#{$horz}-radius: $radius;
  -moz-border-#{$vert}-#{$horz}-radius: $radius;
  -webkit-border-#{$vert}-#{$horz}-radius: $radius;
}

#navbar li { @include rounded(top, left); }
#footer { @include rounded(top, left, 5px) }

顏色函數(shù)

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

插入文件

@import "path/filename.scss";

@import "foo.css";

條件語(yǔ)句

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

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

循環(huán)語(yǔ)句

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

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

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

自定義函數(shù)

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112047.html

相關(guān)文章

CSS 強(qiáng)化裝備！Sass 安裝與使用

摘要：不過必須要先安裝，然后再安裝。淘寶鏡像安裝由于國(guó)內(nèi)網(wǎng)絡(luò)原因你懂的，導(dǎo)致存放在上面的資源文件間歇性連接失敗。嵌套可以進(jìn)行選擇器的嵌套，表示層級(jí)關(guān)系。重要注釋管理項(xiàng)目文件結(jié)構(gòu)預(yù)處理器的特點(diǎn)之一是可以把你的代碼分割成很多文件，而且不會(huì)影響性能。 Sass 是什么？ showImg(https://segmentfault.com/img/bVqyKF); Sass 是 Syntactical...

wuyumin 2019-08-28 18:19 評(píng)論0 收藏0
sass的基本使用

摘要：本文所有的例子都是在中編譯，而可以自行編譯，具體可以查看該鏈接配置的概念定義是的一種預(yù)處理器，文件后綴名為，可以用中的來轉(zhuǎn)成樣式。最近在項(xiàng)目中利用到了css預(yù)處理器（sass），而之前沒接觸過的本博主出于好奇心，就在業(yè)余的時(shí)間里搜了一些資料來看看，看完后覺得sass挺不錯(cuò)，就想簡(jiǎn)單的介紹一下sass的基本使用方法（ps：本文只介紹sass的一些基本使用，而這些內(nèi)容都是本博主覺得比較有...

alighters 2019-08-30 15:53 評(píng)論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單且可維護(hù)。 ? SASS的本...

StonePanda 2019-08-30 14:04 評(píng)論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單且可維護(hù)。 ? SASS的本...

pcChao 2019-08-22 15:01 評(píng)論0 收藏0
Sass

摘要：同樣的在下安裝有多種方法。這樣的文件，命名規(guī)范是以下劃線開頭的，這樣的文件不會(huì)被編譯成文件。這個(gè)特性現(xiàn)在正被眾多開發(fā)者濫用。就是取值的一種特殊形式，符合特殊用法。函數(shù)名稱參數(shù)列表數(shù)據(jù)處理繼承允許一個(gè)選擇器，繼承另一個(gè)選擇器。 sass介紹 ? SASS是一種CSS的開發(fā)工具，提供了許多便利的寫法，大大節(jié)省了設(shè)計(jì)者的時(shí)間，使得CSS的開發(fā)，變得簡(jiǎn)單且可維護(hù)。 ? SASS的本...

alexnevsky 2019-08-01 18:40 評(píng)論0 收藏0
[Sass]-Sass入門

摘要：未編譯樣式多繼承鏈?zhǔn)嚼^承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數(shù)，參數(shù)名以符號(hào)開始，多個(gè)參數(shù)以逗號(hào)分開，也可以給參數(shù)設(shè)置默認(rèn)值。初識(shí)Sass SASS簡(jiǎn)介 sass是一種css預(yù)處理器，用專門的編程語(yǔ)言，進(jìn)行網(wǎng)頁(yè)樣式設(shè)計(jì)，然后再編譯成正常的CSS文件。Sass是CSS3的擴(kuò)展，它增加了嵌套規(guī)則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...

godiscoder 2019-08-29 13:27 評(píng)論0 收藏0