Sass基礎(chǔ)

1. npm 安裝

npm install -g sass

2. 查看是否安裝成功

sass --version

3. 在根目錄下創(chuàng)建sass，css文件夾，并且在sass文件夾下創(chuàng)建樣式文件
image.png
4. 編譯
  • 命令行編譯
    sass sass/style.scss:css/style.css
  • 自動編譯
    sass --watch sass:css
    image.png

變量 -- Variables

$primary-color: #1269b5;
$primary-border: 1px solid $primary-color;

div.box{
    background-color: $primary-color;
}
.page-header{
    border: $primary-border;
}

div.box {
  background-color: #1269b5;
}
.page-header {
  border: 1px solid #1269b5;
}

/*# sourceMappingURL=style.css.map */

嵌套 -- Nesting

  • 嵌套
.nav{
    height: 100px;
    ul{
        margin: 0;
        li{
            float: left;
            list-style: none;
            padding: 5px;
        }
        a{
            display: block;
            &:hover{
                background-color: #0d2f7e;
                color: #fff;
            }
        }
    }
    & &-text{
        font-size: 15px;
    }
}

.nav {
  height: 100px;
}
.nav ul {
  margin: 0;
}
.nav ul li {
  float: left;
  list-style: none;
  padding: 5px;
}
.nav ul a {
  display: block;
}
.nav ul a:hover {
  background-color: #0d2f7e;
  color: #fff;
}
.nav .nav-text {
  font-size: 15px;
}

/*# sourceMappingURL=style.css.map */
  • 屬性嵌套
body{
    font: {
        family: Helvetica, Arial, sans-serif;
        size: 15px;
        weight: normal;
    }
}

.nav{
    border: 1px solid #000 {
        left: 0;
        right: 0;
    }
}

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
}

.nav {
  border: 1px solid #000;
  border-left: 0;
  border-right: 0;
}

/*# sourceMappingURL=style.css.map */

混合 -- Mixins

@mixin 名字 (參數(shù)1，參數(shù)2) ｛ ... ｝

$success: green;

@mixin alert($text-color, $background) {
    color: $text-color;
    background-color: $background;
    a{
        color: darken($text-color, 10%);
    }
}

.alert-warning{
    @include alert(#8a8a8a,#fcf8e3);
}

.alert-info{
    @include alert($background:#fcf8e3, $text-color:#8a8a8a )
}

.alert-success{
    @include alert($success, #fcf8e3 )
}

.alert-warning {
  color: #8a8a8a;
  background-color: #fcf8e3;
}
.alert-warning a {
  color: #717171;
}

.alert-info {
  color: #8a8a8a;
  background-color: #fcf8e3;
}
.alert-info a {
  color: #717171;
}

.alert-success {
  color: green;
  background-color: #fcf8e3;
}
.alert-success a {
  color: #004d00;
}

/*# sourceMappingURL=style.css.map */

繼承/擴展 -- interitance

.alert{
    padding: 15px;
}
.alert a{
    font-weight: bold;
}

.alert-info{
    @extend .alert;
    background-color: #f5f5f5;
}

.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #f5f5f5;
}

/*# sourceMappingURL=style.css.map */

Partials與@import

partials文件要以 '_' 開頭，表示是分割的部分文件，不會被編譯成css
創(chuàng)建一個_base.scss

_base.scss

body{
    padding: 0;
    margin: 0;
}

@import 'base';

.alert{
    padding: 15px;
}
.alert a{
    font-weight: bold;
}

.alert-info{
    @extend .alert;
    background-color: #f5f5f5;
}

body {
  padding: 0;
  margin: 0;
}

.alert, .alert-info {
  padding: 15px;
}

.alert a, .alert-info a {
  font-weight: bold;
}

.alert-info {
  background-color: #f5f5f5;
}

/*# sourceMappingURL=style.css.map */

數(shù)據(jù)類型 -- data type

1. 數(shù)字
image.png

數(shù)字函數(shù)


image.png
2. 字符串
image.png

字符串函數(shù)


image.png
3.顏色

rgb 與 rgba

body{
    background-color: rgb(255,255,0);
}
.box{
    background-color: rgba(255,255,0,.5);
}

body {
  background-color: yellow;
}

.box {
  background-color: rgba(255, 255, 0, 0.5);
}

/*# sourceMappingURL=style.css.map */

hsl(色相，飽和度，明度) 與 hsla

body{
    background-color: hsl(60,100%,50%);
}
.box{
    background-color: hsla(60,100%,50%,.5);
}

body {
  background-color: yellow;
}

.box {
  background-color: rgba(255, 255, 0, 0.5);
}

/*# sourceMappingURL=style.css.map */

adjuest 與 hue
adjuest-hue($color, $degrees)
參數(shù)1：調(diào)整的顏色 參數(shù)2：調(diào)整的度數(shù)

$base-color: #ff0000;
$base-color-hsl: hsl(0, 100, 50%);

body{
    background-color: adjust-hue($base-color-hsl,137deg)
}

body {
  background-color: #00ff48;
}

/*# sourceMappingURL=style.css.map */

lighten 與 darken 改變顏色明度

$base-color: hsl(222, 100%, 50%);
$light-color: lighten($base-color, 30%);
$dark-color: darken($base-color, 20%);

.alert{
    border: 1px solid $base-color;
    background-color: $light-color;
    color: $dark-color;
}

.alert {
  border: 1px solid #004dff;
  background-color: #99b8ff;
  color: #002e99;
}

/*# sourceMappingURL=style.css.map */

saturate 與 desaturate 改變飽和度

$base-color: hsl(221, 96%, 69%);
$saturate-color: saturate($base-color, 50%);
$desaturate-color: desaturate($base-color, 30%);
.alert{
    background-color: $saturate-color;
}
.alert{
    background-color: $desaturate-color;
}

.alert {
  background-color: #6193ff;
}

.alert {
  background-color: #7c9de4;
}

/*# sourceMappingURL=style.css.map */

opacify 與 transparentize 改變透明度

$base-color: hsla(221, 100%, 50%, 0.5);
$fade-in-color: opacify($base-color, 0.3);
$fade-out-color: transparentize($base-color, 0.2);
.alert{
    background-color: $fade-in-color;
    border: 1px solid $fade-out-color;
}

.alert {
  background-color: rgba(0, 81, 255, 0.8);
  border: 1px solid rgba(0, 81, 255, 0.3);
}

/*# sourceMappingURL=style.css.map */
4. 列表 -- list
image.png

image.png

image.png
5. 布爾值 -- boolean
image.png

控制指令 -- Control Directives

@if

$use-prefixes:true;
$theme: "dark";
body{
    @if $theme == dark{
        background-color: black;
    }@else if $theme == light{
        background-color: white;
    }@else{
        background-color: gray;
    }
}
.rounded{
    @if $use-prefixes{
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        -ms-border-radius:5px;
        -o-border-radius:5px;
    }
    border-radius: 5px;
}

body {
  background-color: black;
}

.rounded {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

/*# sourceMappingURL=style.css.map */

@for (through or to)

$columns: 4;
@for $i from 1 through $columns{
    .col-#{$i}{
        width: 100% / $columns * $i;
    }
}

.col-1 {
  width: 25%;
}

.col-2 {
  width: 50%;
}

.col-3 {
  width: 75%;
}

.col-4 {
  width: 100%;
}

/*# sourceMappingURL=style.css.map */

@each

$icons: success error warning;
@each $icon in $icons {
    .icon-#{$icon}{
        background-image: url(../images/icons/#{$icon}.png);
    }
}

.icon-success {
  background-image: url(../images/icons/success.png);
}

.icon-error {
  background-image: url(../images/icons/error.png);
}

.icon-warning {
  background-image: url(../images/icons/warning.png);
}

@while

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

.item-6 {
  width: 30px;
}

.item-4 {
  width: 20px;
}

.item-2 {
  width: 10px;
}

用戶自定義的函數(shù) -- function

$colors: (light: #ffffff, dark: #000000);

@function color($key){
    @return map-get($colors, $key )
}

body{
    background-color: color(light);
}

body {
  background-color: #ffffff;
}

/*# sourceMappingURL=style.css.map */

警告與錯誤

$colors: (light: #ffffff, dark: #000000);

@function color($key){
    @if not map-has-key($colors, $key ){
        @warn "在 $colors 里沒有找到 #{$key} 這個 key"
    }
    @return map-get($colors, $key )
}

body{
    background-color: color(light);
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、相關(guān)網(wǎng)站地址 Sass官網(wǎng)：http://sass-lang.com/；Sass中文網(wǎng)：https://www...
    夏晶晶綠閱讀 991評論 0贊 0
  • Sass、Scss、Css關(guān)系介紹 Sass是基于ruby的一種CSS預(yù)處理語言（可以理解成一種能生成CSS，而且...
    dawsonenjoy閱讀 827評論 0贊 2
  • 預(yù)處理 CSS本身可以很有趣，但樣式表變得更大，更復(fù)雜，更難維護。這是預(yù)處理器可以提供幫助的地方。 Sass允許你...
    小王子b612小行星閱讀 1,178評論 0贊 0
  • 什么是 Sass 世界上最成熟、最穩(wěn)定、最強大的專業(yè)級 CSS 擴展語言！ Sass 能幫助我們解決什么問題 嵌套...
    夢幽辰閱讀 391評論 0贊 0
  • Sass is the most mature, stable, and powerful professiona...
    Anlihuer閱讀 572評論 1贊 1

友情鏈接更多精彩內(nèi)容