Sass-基本用法

14次阅读
没有评论

共计 3229 个字符,预计需要花费 9 分钟才能阅读完成。

安装 Sass

Sass 中文网

sass有两种后缀名文件

  1. 一种后缀名为 sass,不使用大括号和分号
  2. 另一种后缀名为 scss,这种和我们平时写的css文件格式差不多,使用大括号和分号。

编译 Sass

命令行编译

#sass 要编译的sass文件路径:编译完成后放到那里叫什么
sass sass/style.sass:css/style.css

自动编译

#sass --watch 要监听的文件:放到那个文件
sass --watch sass:css

编译格式

  • nested 嵌套
  • compact 紧凑
  • expanded 扩展
  • compressed 压缩
    更改编译格式
sass --watch sass:css --style compressed

变量

sass 使用 $ 符号来标识变量

$red-color: #f00;
$red-border: 1px solid $red-color;

// 变量引用
div {
    border: $red-border;
}

嵌套 CSS 规则

nav {
    height: 100px;
    ul {
        margin: 0;
        li {
            padding: 5px;
            list-style: none;
        }
    }
}

父选择器的标识符 &

a {
    color: blue;
    &:hover {
        color: red 
    }
}

嵌套属性

在 sass 中,除了CSS选择器,属性也可以进行嵌套。尽管编写属性涉及的重复不像编写选择器那么糟糕,但是要反复写border-styleborder-widthborder-color以及border-等也是非常烦人的。在sass中,你只需敲写一遍border:

nav {
    border: {
        style: solid;
        width: 1px;
        color: #ccc;
    }
}

Mixins

定义 mixin

通过 @mixin 加名称的方式就可以定义一个Mixins模块,在模块内你可以添加任何你想重复使用的样式。

@mixin 名字 (参数1, 参数2...) {
    ...
}

@mixin button {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
}

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

使用 @mixin 指令

你可以通过 @include 来调用具有相同名称的mixin模块。

.button-green {  
    @include button;  
    background-color: green;  
}

在mixin模块的定义中还可以包含其他的mixin。比如:

@mixin button-blue {  
    @include button;  
    @include link;  
}

参数的使用

Mixins可以接收和使用参数,这使得它比@extend更加强大和灵活。我更新了之前的button模块,增加了名为background的参数并将其传递给模块。

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

注意到参数被设置为一个变量并成为backround属性的值。如果我们想创建一个绿色的按钮,那么就可以使用以下代码:

.button-green {  
    @include button(green);  
}

给参数设置默认值

你可能会好奇如果在定义mixin时定义了参数,但是在@include调用时没有传递参数会发生什么。这种情况下你会收到一个编译错误的提示。同时我相信这种情况一定不是你想看到的。你可以通过在mixin中定义参数的时候给它设置一个默认值,从而来避免这种错误。

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

@extend 同步样式

.box {
    background-color: red;
}

div {
    @extend .box;
    color: #fff;
}

@import 引入其他 sass 文件

@import "base";

颜色

adjust-hue() 色相度数

adjust-hue(颜色,度数deg)

.box {
    background-color: adjust-hue(#f00, 180deg)
}

lighten 与 darken 颜色明度

lighten|darken(颜色,明度%)

.box {
    background-color: lighten(#f00, 50%)
}

.box {
    background-color: darken(#f00, 50%)
}

saturate 增加颜色纯度(饱和度)darken 减少颜色纯度(饱和度)

saturate|darken(颜色,饱和度%)

.box {
    background-color: lighten(#f00, 50%)
}

.box {
    background-color: darken(#f00, 50%)
}

transparentize 透明度 opacify 不透明度

transparentize|opacify(颜色, 0~1)

控制指令

@if

@if 条件 {
    ...
}

$use-prefixes: true;
.rounded {
    @if $use-prefixes {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }
    border-radius: 5px;
}

$theme: "dark";
body {
    @if $theme == dark {
        background-color: black;
    } @else @if $theme == light {
        background-color: white;
    } @else {
        background-color: grey;
    }
}

@for

@for $var from <开始值> through <结束值> {
    ...
}
$columns: 4;
// 包含4
@for $i from 1 through $columns{
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}

@for $var from <开始值> to <结束值> {
    ...
}
$columns: 4;
// 不包含4
@for $i from 1 to $columns{
    .col-#{$i} {
        width: 100% / $columns * $i;
    }
}

@each

@each $var in $list {
    ...
}

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

while

@while 条件 {
    ...
}

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

自定义函数

@function 名称 (参数1, 参数2...) {
    ...
}

$colors: (light: #fff, dark: #000);
@function color($key) {
    @return map-get($colors, $key);
}

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

警告与错误

$colors: (light: #fff, dark: #000);
@function color($key) {
    @if not map-has-key($colors, $key) {
        @warn "在 $colors 里没有找到 #{$key} 这个 key";
    }
    @return map-get($colors, $key);
}

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

正文完
 1
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计3229字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码