sass 【css预处理器】------sass的基本语法------【凡尘】

【css预处理器】------sass的基本语法------【凡尘】

00一、安装sass

一、删除gem源：gem sources --remove https://rubygems.org/

二、添加国内源：gem sources -a http://gems.ruby-china.org/

三、打印是否替换成功：gem sources -l

四、安装sass:gem install sassgem sources -a http://gems.ruby-china.org/

00二、sass的四种编译风格

nested：嵌套缩进的css代码，它是默认值。

expanded：没有缩进的、扩展的css代码。

 

compact：简洁格式的css代码。

compressed：压缩后的css代码。

 

00三、编译sass

1、单个文件编译：sass 文件名：文件名

2、编译整个文件夹：sass 文件夹名：文件夹名 三、监听编译：sass --watch 文件名:文件名

 

00四、sass的基本语法

一、sass中定义变量用$

1、普通变量和默认变量

    普通变量定义了后可在全局使用
　　　

    默认变量仅须要在值后面加!default
    


二、若是变量须要镶嵌在字符串之中，就必须须要写在#{}之中

三、局部变量只能在局部使用，全局变量能够在任何地方使用

 

二、嵌套

选择器嵌套：
    ul{
         li{
            color:red;
            &:hover a{ color:#000;  } } } 

&:表明父级 

三、混合宏

做用：能够重用代码块

声明混合宏：@mixin

调用混合宏：@include


一、不带参数的混合宏

　　@mixin border-radius{

    　　 -webkit-border-radius:5px;

     　　border-radius:5px;

　　}

 

 

　二、带参数的混合宏

　

　　@mixin border-radius($radius:5px){

　　　　 -webkit-border-radius:$radius;

 　　　　border-radius:$radius;

　　}

　　若是须要修改则在调用的时候直接修改便可

 

四、继承

在sass中，经过继承能够减小重复的代码，让一个选择器继承另外一个选择器的样式

方法：@extend

.alert{font-size:18px;}

.alert a{
　　text-align:center;
　　&:hover{
　　　　color:red;
　　}
}

div{@extend .alert}

五、@import

@import:引入其余文件 例如：reset文件 公共文件的引入：命名规范是如下划线开头的，这样的 scss 文件不会被编译成 css

_base.scss文件

@import "base";