sass使用

sass是啥

    CSS 不是一个编程语言,可以用它来开发网页样式,但是没有办法用它进行编程。SASS 的
出现,让 CSS 实现了通过代码编程来实现的方式。
    SASS 是一种 CSS 开发工具,提供了许多便利的写法,让CSS 的处理实现了可编程处理。
    SASS 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的 CSS 样式表文件,易于组织和维护。

后缀

sass 有两种后缀名文件:一种后缀名为 sass,不使用大括号和分号;另一种就是我们这    里使用的 scss 文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。
在此也建议使用后缀名为 scss 的文件,以避免 sass 后缀名的严格格式要求报错。

安装

1.ruby安装,用命令行gem install sass

编译

1.先进入包含.scss文件的文件夹
2.sass --watch example.scss:example.css --style 
参数1

参数如下:
nested  嵌套
compact  紧凑 每个选择器代码在一行
expanded  扩展(完全格式化标准)
compressed  压缩一行

3。多文件编译
sass --watch .:css --style nested 

中文注释问题

@charset "utf-8";

Sass-变量定义

变量

    必须是$符号开头,后面紧跟变量名,变量名称和变量值之间要使用冒号:进行分隔(参考 CSS 属性和值的设定语法) ,如果值后面加上[!default]就表示默认值。
引用变量的值,直接使用变量名称,即可引用定义的变量的值
$w:200px;
$h:200px;
$color:red;
.box{
    width: $w;
    height: $h;
    background: $color - 10;
}   

特殊变量

一般情况下,我们定义的变量都是属性值,可以直接使用,但是如果变量作为属性或者其他的特殊情况下,必须使用#{$variable}的形式进行调用。
$b:border;
$n:none;
.box1{
    #{$b}:1px solid #f99;
    #{$b}-color:red;
    display: $n;
}

Sass-数组/map

map 就是列表项目中带名称的列表
定义数组: $map:(key1:value1, key2:value2, key3:value3)
length($map):获取 map 中的元素对个数
map-keys($map):获取指定$map 中所有的 key
map-values($map):获取指定$map 中所有的 value
map-values($map):获取指定$map 中所有的 value
map-merge($map1, $map2):将$map1$map2 合并在一起
map-remove($map, key):将指定名称的 key 从$map 中移除

Sass-嵌套

1.选择器嵌套,在嵌套的过程中,如果需要用到父元素,在 SASS 中通过&符号引用父属性
2.嵌套属性——不常用

选择器

.box2{
    color:red;
    p{
        width: 10px;
        height: 200px;
        li{
            color:red;
        }
    }
}

属性

.box3{
    width: 200px;
    height: 200px;
    border:{
        width: 20px;
        style:dashed;
        color:blue;
        top:{
            style:double;
        }
        bottom:{
            color: red;
        }
    }
}

Sass-mixin函数

sass 中可以通过@mixin 声明混合,可以传递参数,参数名称以$开始,多个参数之间使用逗号分隔,@mixin 的混合代码块由@include 来调用。
@mixin top($co:red,$wb:50px){
     border-color: transparent transparent $co transparent;
     border-width: $wb;
     border-style:solid;
}
.box4{
    width: 0;
    height: 0;
    @include top();
}

Sass-语句

if语句

@if 指令是 SASS 中的一个控制指令,用于在表达式满足条件(true)的时候输出指定的
样式,在不满足条件(false)或者表达式为 null 的情况下输出其他的样式,里面不能定$n:200px;

m:600px;s:red;
.box5{
@if n<

0
0

我的同类文章

IT文库 » sass使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址