Sass的基础姿势

拈花ヽ惹草 提交于 2019-11-26 14:18:48

SASS是什么

传统的CSS是一种单纯的描述性样式文件,然而SASS可以对CSS进行预编译处理。 在SASS源码中可以使用变量、函数、继承等动态语言的特性,并且可以编译成CSS文件。

安装与使用

安装

由于sass是ruby写的,所以想要使用sass就需要安装ruby环境。然后再使用gem安装sass。 输入下面的命令进行安装sass:

gem install sass

可以使用sass -v命令查看sass的版本。

使用

新建一个后缀名为.scss源码文件,就可以编辑sass源码了。 然后使用下面的命令可以将源码文件编译转换为css并显示在屏幕上。

sass test.scss

也可以在后面加上后缀名为.css的文件名,就可以在当前目录生成css文件。如下:

sass test.scss test.css

.sass.scss这两种的区别在于.sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。

命令参数

--style:编译风格 sass提供四种编译风格选项:

  • nested:嵌套缩进的css代码,它是默认值。
  • expanded:没有缩进的、扩展的css代码。
  • compact:简洁格式的css代码。
  • compressed:压缩后的css代码。

e.g.

sass test.scss test.css --style compressed

--watch:监听文件变动 sass可以监听源文件变动,并自动生成编译后的版本。 e.g.

//监听单个文件
sass --watch test.scss:test.css
//监听目录
sass --watch sassFileDirectory:cssFileDirectory

变量

SASS使用$开头定义变量

$white:#FFFFFF;
body{
    color: $white;
}

如果需要将变量插入到字符串中,需要将变量写在#{}

$imgUrl:"../img/test.png";
body{
    background-image: url(#{$imgUrl});
}

运算

SASS允许在代码中使用算式

$min-left:10px;
body{
    margin-left:$min-left+20px;
}

嵌套

SASS允许嵌套规则

div{
    //选择器嵌套
    p{
        color:#FFFFFF;
    }
    //属性嵌套
    margin:{
        left:10px;
    }
    //伪类嵌套
    &:hover{
        color:#F4F4F4;
    }
}

编译成CSS样式为:

div {
  margin-left: 10px;
}
div p {
  color: #FFFFFF;
}
div:hover {
    color: #F4F4F4;
}

继承

SASS可以使用@extend继承于另一个选择器。

.page{
    background-color:#F7F7F7;
}
.div1{
    @extend .page;
    color:#FFFFFF;
}

Mixin

SASS提供Mixin类似“函数”的重用代码块。 使用@mixin定义样式代码块,然后使用@include调用该样式。 不同于@extend的是Mixin定义样式不会编译输出在CSS样式中,并且可以指定参数和默认值。

//不带参数的mixin
@mixin page{
    background-color:#F7F7F7;
}
//带参数的mixin
@mixin setDefMargin($left, $right, $bottom: 10px,$top: 10px){
    margin:$top $right $bottom $left;
}
.test{
    @include page;
    @include setDefMargin(20px,30px);
    color:#FFFFFF;
}

需要注意的是,必须先定义没有默认值的参数,后指定有默认值的参数。

Import

sass可以使用@import语句,来引用指定的外部文件。

//引入scss文件
@import "variable.scss";
//引入css样式文件
@import "style.css";

条件语句

使用@if@else语句可以用来做条件判断

$min-margin: 10px;
@mixin init-margin($left){
    //判断传入的参数是否大于最小值
    @if $left > $min-margin {
        margin-left: $left;
    } @else {
        margin-left: $min-margin;
    }
}
body {
    @include init-margin(5px);
}

循环语句

FOR循环

使用@for来定义循环体。 $i表示循环变量,from 后面跟上开始数值,to后面跟结束数值。

@for $i from 1 to 20 {
    .page-index#{$i} {
        color: #FFFFFF;
    }
}

WHILE循环

使用@while定义循环体,后面跟循环条件。

//循环变量
$i: 2;
@while $i<10{
    page-index#{$i} {
        color: #F4F4F4;
    }
    $i=$i=1;
}

自定义函数

使用@function语句可以自定义函数,@return表示函数的返回值

@function calcNumber($num) {
    @return $num+10;
}
body {
    margin-left: calcNumber(20px);
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!