Sass

mating 發布于2019-08-29 12:39 / 1082人閱讀

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

Sass

Sass用法指南 - 阮一峰

官方文檔

安裝

安裝ruby

gem install sass

編譯選項

// 編譯格式
sass --watch input.scss:output.css --style compact
// 添加調試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;
}

計算

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;
}

指定參數和缺省值：

@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) }

顏色函數

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

插入文件

@import "path/filename.scss";

@import "foo.css";

條件語句

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;
}

循環語句

@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");
  }
}

自定義函數

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

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

GPU云服務器云服務器 sass 多云管理 sass sass 混合云部署 iaas paas sass

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112047.html

CSS 強化裝備！Sass 安裝與使用

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

wuyumin 2019-08-28 18:19 評論0 收藏0
sass的基本使用

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

alighters 2019-08-30 15:53 評論0 收藏0
Sass

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

StonePanda 2019-08-30 14:04 評論0 收藏0
Sass

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

pcChao 2019-08-22 15:01 評論0 收藏0
Sass

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

alexnevsky 2019-08-01 18:40 評論0 收藏0
[Sass]-Sass入門

摘要：未編譯樣式多繼承鏈式繼承占位選擇器編譯后樣式中使用聲明混合，可以傳遞參數，參數名以符號開始，多個參數以逗號分開，也可以給參數設置默認值。初識Sass SASS簡介 sass是一種css預處理器，用專門的編程語言，進行網頁樣式設計，然后再編譯成正常的CSS文件。Sass是CSS3的擴展，它增加了嵌套規則，變量，mixins，選擇器繼承等等。Sass生成格式良好的CSS，使樣式表更易于組...

godiscoder 2019-08-29 13:27 評論0 收藏0