SCSS 平常用法

時間  2019-12-05
標籤 scss 平常 用法 简体版
原文   原文鏈接

SCSS 平常用法

本文是以本身的理解起的結構，要看詳細的幫助文檔，參閱這裏： https://sass-lang.com/documen...

你須要瞭解的

less 和 sass 是兩種 css 預編譯語言，其目的是爲了更快、更結構的編寫 css 文件，是一種強大的 css 編譯語言，都能使用 變量、運算符、判斷、方法等等。php

scss 與 sass 的區別（這裏先不講 less ）：css

  • 先有的 sass 後有的 scss
  • scss 須要大括號{}和分號;
  • sass 什麼都不用直接裸奔

感受 sass 不如 scss 嚴謹，裸奔太狂野了，因此咱們選用 scss，git

看個小例子

寫一個 .btn 類並支持 :hover :active 樣式github

cssweb

.btn {
/* btn 初始樣式 */
}
.btn:hover{
/* :hover 樣式 */
}
.btn:active{
/* :active 樣式 */
}

scssbootstrap

.btn{
// btn 初始樣式
    &:hover{
        // hover 樣式
    }
    &:active{
        // active 樣式
    }
}

在scss, sass, less 中 & 都代指父類
上面這個例子中的 & 代指 .btn
能夠看出 scss 的結構要比 css 清晰，而且寫的也要更少。
下面的 scss 在使用中就會生成上面的 css。
而這還只是皮毛，保證你用過 scss 以後就不會再用 css 寫樣式了。segmentfault

變量

變量是以 $ 開頭的，能夠是顏色，長度，數值，等等。sass

像 js 的變量同樣，scss 的變量也是有做用域的，也就是說內部聲明的變量是沒法在外面使用的，若是想讓內部的變量在外部可訪問，須要在變量值後面添加 !global 聲明。app

（還能夠經過添加 !default 給變量設置默認值，這個在寫一個樣式庫的時候比較實用，避免別人在沒有給變量賦值以前使用）less

$變量名: 變量值
// Colors
$red:       #CD594B !global;
$yellow:    #F8CE5E;
$green:     #4B9E65;
$yellow:    #5A8DEE;

// Unites
$btn-padding: 4px;
$btn-lineheight: 26px;

實際使用中：

scss

.btn-success {
    background-color: $green;
    line-height: $btn-lineheight;
    color: #fff;
}

生成 css

.btn-success {
    background-color: #4B9E65;
    line-height: 26px;
    color: #fff;
}

嵌入字符串

將變量直接嵌入字符串，須要用#{ 變量 } （相似 ES6 中模板字符串中的${ 變量 }）

其實 #{} 中是能夠插入任意東西的，這裏只用到了插入變量，還能夠插入方法等等，高級用法。

scss

$bg-path: "./img"

.card{
    background: url("#{$bg-path}/card-bg.png" center center);
}

css

.card{
    background: url("./img/card-bg.png" center center);
}

導入文件 @import

經過 @import 能夠把多個文件結合到一塊兒
有了這個功能，就能夠經過功能拆分 scss 文件，使其更結構化，好比，能夠分紅：變量類，按鈕類，列表類，字體類，排版類等等。

拆分紅多個文件的時候，以 _開頭命名的文件，不會被像 phpStorm 中的 file watcher 自動預編譯成css文件， less 沒有這效果，在這一點上 scss 很不錯。

_variables.scss

$bg-btn: #ddd;
$color-btn: #444;

btn.scss

@import "_variables";

.btn{
    display: inline-block;
    padding: 3px 6px;
    background-color: $bg-btn; 
    color: $color-btn;
}

生成 css

.btn{
    display: inline-block;
    padding: 3px 6px;
    background-color: #ddd; 
    color: #444;
}

相互嵌入 @mixin @include

這個是最經常使用的，經過 @mixin 定義一個類或方法，在其它地方經過 @include 引用這個方法或類。

若是是方法，還能夠定義默認值，也就是說能夠某些時候，能夠傳部分參數。

直接看例子
scss

// @mixin 若是沒有調用，不會被渲染

@mixin rounded($conor: 5px){ // 定義 mixin 並設置默認值 5px
  -webkit-border-radius: $conor;
  -moz-border-radius: $conor;
  border-radius: $conor;
}

.btn-rounded{
  @include rounded(); // 這裏引用上面的 mixin，默認值 5px
}

.btn-big-rounded{
  @include rounded(10px); // 這裏引用上面的 mixin，並設置值 10px
}

生成 css

.btn-rounded{
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.btn-big-rounded{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

繼承 @extend

有些時候，須要寫的某個類裏，包含另外一個類的全部聲明。
如： 警告按鈕，包含全部警告顏色類的內容。

scss

.danger{
  background-color: #FF3B30;
}
.round{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn{
  display: inline-block;
  padding: 3px 6px;
}

.btn-danger{
  @extend .danger, .round, .btn;
}

生成 css

.danger, .btn-danger {
  background-color: #FF3B30;
}
.round, .btn-danger {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.btn, .btn-danger {
  display: inline-block;
  padding: 3px 6px;
}

@extend 注意事項：
不能繼承 @extend .danger.text 這種連續組合的類，應該寫爲 @extend .danger, .text

經常使用方法

詳見： https://sass-lang.com/documen...

不知作別人，反正我最經常使用的就是顏色方法了。列舉經常使用的顏色方法

lighten     (顏色, 百分比)   // 調亮
darken      (顏色, 百分比)   // 調暗
saturate    (顏色, 百分比)   // 調高飽和度
desaturate  (顏色, 百分比)   // 下降飽和度

clipboard.png

scss

$green: #4B9E65;


.green{
  background-color: $green;
}

.green-lighten{
  background-color: lighten($green,20%);
}

.green-darken{
  background-color: darken($green,20%);
}

.green-saturate{
  background-color: saturate($green,20%);
}

.green-desaturate{
  background-color: desaturate($green,20%);
}

生成 css

.green {
  background-color: #4B9E65;
}
.green-lighten {
  background-color: #88c79c;
}
.green-darken {
  background-color: #2a5939;
}
.green-saturate {
  background-color: #34b55c;
}
.green-desaturate {
  background-color: #62876e;
}

其它

方法 @function

方法以 @function 開頭，以 @return 結尾，也就是說，方法的定義，必需要有返回值

詳見： https://sass-lang.com/documen...

調試方法 @error @warn @debug

像js同樣，用於輸出提示信息

  • @debug: 普通輸出
  • @warn: 警告輸出
  • @error: 錯誤輸出

代碼結構

聲明

通用

  • 變量聲明， $var: value
  • 控制聲明，@if @each
  • @error，@warn，@debug

CSS

  • 樣式，h1 { ... }
  • 樣式@ @media @font-face
  • @at-root

頂級

  • 導入 @import
  • 混合 @mixin
  • 方法定義 @function

表達式

  • 數字 12 100px
  • 字符串 Helvetina Neue bold
  • 顏色 #ffffff blue
  • 布爾值 true false
  • null
  • 屬性值組 border: 1px solid #ccc
  • Maps ("background": red, "foreground": pink)

運算符

  • == !=
  • + - * / %
  • < <= >=
  • and or not
  • + - / 鏈接字符
  • ( )

其它

  • 變量 $var
  • 方法調用 nth($list,1) var(--main-bg-color)
  • 特殊方法 calc(1px + 100%) url(http://myapp.com/assets/logo.png)
  • 父選擇器 &
  • !important

註釋

/*  多行註釋
        能夠多行
        在非壓縮模式下，這種註釋會被輸出到 css 中
*/

// 單行註釋
// 這種註釋不會輸出到 css 中

特殊方法

CSS 自己自帶一些方法，大多數方法都能與SCSS方法和平共存，但有些會產生衝突，如url()

若是 url() 傳入的參數是有效的帶引號的url，sass不會處理它，但還能夠往其中插入變量，若是不是有效的帶引號的 url，帶有方法或變量的，sass就把它當成正常的方式識別。如：

$bg-path: "./pics"

.card-bg{
    background: url("#{$bg-path}/card-bg.png") center center;
}

// 或
.card-bg{
    background: url($bg-path+"/card-bg.png") center center;
}

都會輸出爲

.card-bg{
    background: url("./pics/card-bg.png") center center;
}

例子 .btn

有時候，好比，你須要寫一個按鈕類 .btn-success, .btn-danger, .btn-default, .btn-warning，若是單個定義的話，會很麻煩，如今用了方法，就能夠直接填參數完成了。

scss

$green:     #4B9E65;
$blue:      #5A8DEE;
$yellow:    #F8CE5E;
$red:       #CD594B;

@mixin btn-template($bgcolor,$fcolor:white){
// 定義了兩個參數，第二個參數有默認值
// 也就是說這個方法能夠值一個或兩個參數
// 另外 帶 () 參數的方法不會把自身渲染到 css 中，只有調用纔會渲染
  color: $fcolor;
  border-color: darken($bgcolor, 3%);
  background-color: $bgcolor;
  &:hover {
    background-color: darken($bgcolor, 5%);
  }
  &:active {
    background-color: darken($bgcolor, 10%);
  }
}

.btn-success{
  @include btn-template($green)
}
.btn-primary{
  @include btn-template($blue)
}

.btn-warning{
  @include btn-template($yellow)
}

.btn-danger{
  @include btn-template($red)
}

上面的 scss 輸出爲下面的內容，有沒有很厲害

.btn-success {
  color: white;
  border-color: #46945e;
  background-color: #4B9E65;
}
.btn-success:hover {
  background-color: #438d5a;
}
.btn-success:active {
  background-color: #3b7b4f;
}
.btn-primary {
  color: white;
  border-color: #4c83ed;
  background-color: #5A8DEE;
}
.btn-primary:hover {
  background-color: #437dec;
}
.btn-primary:active {
  background-color: #2c6de9;
}
.btn-warning {
  color: white;
  border-color: #f7ca4f;
  background-color: #F8CE5E;
}
.btn-warning:hover {
  background-color: #f7c746;
}
.btn-warning:active {
  background-color: #f6bf2d;
}
.btn-danger {
  color: white;
  border-color: #ca4e3f;
  background-color: #CD594B;
}
.btn-danger:hover {
  background-color: #c74737;
}
.btn-danger:active {
  background-color: #b34032;
}

學習 scss 最好的例子

就是去看 bootstrap v4 的樣式源碼，bootstrap v4 就是用 scss 寫的

若是想學 less 能夠看這篇 [ less基礎用法 ] - SegmentFault -CSDN， bootstrap v3 就是用 less 寫的。

下載 bootstrap 的 scss 源碼，看裏面怎麼寫的，進步很快的。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程