黑马程序员技术交流社区

标题: 【西安校区】前端工具sass使用 [打印本页]

---

作者: 逆风TO    时间: 2019-11-5 16:06
标题: 【西安校区】前端工具sass使用
一、sass的理解
sass就是让程序员写css时，可以按照编程语言的思路写。即有了sass，咱们写css就会简单得多。Sass是扩展了css3。Sass里有：变量，条件判断，循环，函数，混合，继承。

二、Sass的安装
1、安装ruby语言
因为，sass是基于ruby。但是程序员不需要学习ruby。
测试：
在命令行输入 gem -v 。
如果提示版本号，就说明没有问题，
否则，配置环境变量。

2、在windows环境下
(1)安装sass
①在命令行输入：gem install sass
如果不能安装，则，参见下一篇”sass安装包及来源远程服务器的配置”.

三、Sass的基本使用
1、编译sass文件
写好的sass代码，使用sass命令编译成css，就可以使用了。步骤如下：
(1)在项目根目录下创建demo01.scss
(2)在项目根目录创建文件夹css
(3)在demo01.scss文件里写上sass代码

(4)使用sass命令编译：
在命令行输入 sass demo01.scss:css\demo01.css
(5)那么，就会在项目目录下产生一个css文件


2、监听
在命令行输入：sass --watch .:css
这句命令的意思是：
监听当前目录（. 表示当前目录）下的所有sass文件，如果任何一个sass文件有改动，都会进行sass编译，产生css文件。


四、sass的语法
1、sass 的变量
sass中定义变量，要求以 $ 开头，赋值用冒号，
如：
$baseFontSize:12px; 表示定义了一个变量，名字$baseFontSize，赋值为12;

1）、sass定义的变量使用在属性值里

$baseFontSize:10px;

*{
    margin:0;
    padding: 0;
    font-size: $baseFontSize;
}

2）、sass变量作为类名，或者属性名，要用 #{} 把变量名括起来

$direction:bottom;
#box1{
    border-#{$direction}:1px solid red;
    font-size: $baseFontSize+2;
}

2、Sass 嵌套
1）、选择器嵌套

#box3{
    width: 300px;
    a{
       color: red;
    }
    ul{
        list-style: none;
    }
}

2）、属性嵌套

//属性名嵌套
#box4{
    border:{
        top:1px solid pink;
        bottom:2px solid red;
    }
}
3、Sass 混合（@mixin @include）
(1)无参混合（可以用继承替代）

@mixin redBox {
    width: 200px;
    height: 150px;
    background-color: red;
}

(2)带参混合

@mixin blueBox($w:300px,$h:250px) {
    width: $w;
    height: $h;
    background-color:blue;
}

4、继承（@extend）：
//继承
#box8{
    width: 200px;
    height: 150px;
    background-color: skyblue;
}

#box9{
    @extend #box8;
    color: white;
}

5、Sass里有数据类型和运算符，可以进行算术运算，比较运算，逻辑运算
(1)数据类型：
数字类型： 12，12px；
字符串： 带双引号和不带双引号的都算，如：“hello”, hello
颜色：red,blue #ff9966
布尔类型：true，false
列表类型：
…………………………………………
(2)运算符：
算术运算符： + - * / %
比较运算符： > < >= <= != ==
逻辑运算符：and or not

6、流程控制
(1)@if

$theme:dark;

body{
    @if $theme=="light" {
        background-color: yellow;
    }@else if $theme=="dark"{
        background-color: gray;
    }
}

(2)@for

$column:9;

@for $i from 0  to $column {
    .col-#{$i} {
        left: $i * 150px;
    }
}

(3)@each
(4)@while

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2