[外链图片转存失败(img-G32u6UQ8-1563572536495)(https://upload-images.jianshu.io/upload_images/11158618-a03a58b9b5ed5fc8.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

CSS 的辅助工具

增加了变量,嵌套,混合,导入 等高级功能

[外链图片转存失败(img-9YJDW7rN-1563572536498)(https://upload-images.jianshu.io/upload_images/11158618-a661a8ea37eed680.png?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

# Convert Sass to SCSS
$ sass-convert style.sass style.scss # Convert SCSS to Sass
$ sass-convert style.scss style.sass

使用变量

变量声明

Sass变量声明和CSS属性的声明很像:

$highlight-color: #F90;
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
} //编译后
nav {
width: 100px;
color: #F90;
}

变量引用

$highlight-color: #F90;
.selected {
border: 1px solid $highlight-color;
} //编译后
.selected {
border: 1px solid #F90;
}
$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
border: $highlight-border;
} //编译后
.selected {
border: 1px solid #F90;
}
$link-color: blue;
a {
color: $link_color;
} //编译后
a {
color: blue;
}

嵌套CSS规则

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }
#content {
article {
h1 { color: #333 } p { margin-bottom: 1.4em }
} aside { background-color: #EEE }
}
/* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父选择器标识符&

下面这种情况sass就无法正常工作:

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

群组选择器的嵌套

.button, button {
margin: 0;
} .container h1, .container h2, .container h3 { margin-bottom: .8em } .container {
h1, h2, h3 {margin-bottom: .8em}
}
article {
~ article { border-top: 1px dashed #ccc }
> section { background: #eee }
dl > {
dt { color: #333 }
dd { color: #555 }
}
nav + & { margin-top: 0 }
}

Sass 导入SASS文件

Sass的@import规则在生成css文件时就把相关文件导入进来

$link-color: blue;
$link-color: red;
a {
color: $link-color;
} .blue-theme {@import "blue-theme"}
//生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
.blue-theme {
aside {
background: blue;
color: #fff;
}

/*...*/的注释语法

Sass 混合器

混合器使用@mixin标识符定义

@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
} notice {
background-color: green;
border: 2px solid #00aa00;
@include rounded-corners;
} //sass最终生成:
.notice {
background-color: green;
border: 2px solid #00aa00;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

放在@include被调用的地方

选择器继承

通过@extend语法实

//通过选择器继承继承样式
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}

使用sass编写清晰、无冗余、语义化的css


请点赞!因为你们的赞同/鼓励是我写作的最大动力!

欢迎关注达叔小生的简书!

这是一个有质量,有态度的博客

[外链图片转存失败(img-soNJ7vV0-1563572536500)(https://upload-images.jianshu.io/upload_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip|imageView2/2/w/1240)]

【一起来烧脑】一步Sass学会体系的更多相关文章

  1. python--(十五步代码学会进程)

    python--(十五步代码学会进程) 一.进程的创建 import time import os #os.getpid() 获取自己进程的id号 #os.getppid() 获取自己进程的父进程id ...

  2. python--(十步代码学会线程)

    python--(十步代码学会线程) 一.线程的创建 Thread实例对象的方法 # isAlive(): 返回线程是否活动的. # getname(): 返回线程名. # setName(): 设置 ...

  3. 【一起来烧脑】一步React.JS学会体系

    [外链图片转存失败(img-cn4fbVDq-1563575047348)(https://upload-images.jianshu.io/upload_images/11158618-8c6f3d ...

  4. 一步HTML5教程学会体系

    HTML5是HTML最新的版本,万维网联盟. HTML5是下一代的HTML标准,HTML5是为了在移动设备上支持多媒体. 新特性: 绘画的canvas元素,用于媒介回放的video和audio元素,对 ...

  5. 简单两步快速学会使用Mybatis-Generator自动生成entity实体、dao接口和简单mapper映射(用mysql和oracle举例)

    前言: mybatis-generator是根据配置文件中我们配置的数据库连接参数自动连接到数据库并根据对应的数据库表自动的生成与之对应mapper映射(比如增删改查,选择性增删改查等等简单语句)文件 ...

  6. ionic 项目中创建侧边栏的具体流程分4步简单学会

    这是在学习ionic时,当时遇到的一些问题,觉得很难,就记笔记下来了,现在觉得如果可以拿来分享,有可能会帮助到遇到同样问题的人 ionic slidemenu 项目流程: cd pretices(自己 ...

  7. 简单三步快速学会使用Mybatis-Generator自动生成entity实体、dao接口以及mapper映射文件(postgre使用实例)

    前言: mybatis-generator是根据配置文件中我们配置的数据库连接参数自动连接到数据库并根据对应的数据库表自动的生成与之对应mapper映射(比如增删改查,选择性增删改查等等简单语句)文件 ...

  8. 想高效学会Hadoop,你要按照这个路线

    学习hadoop,首先我们要知道hadoop是什么? 说到底Hadoop只是一项分布式系统的工具,我们在学习的时候要理解分布式系统设计中的原则以及方法,只有这样才能以不变应万变.再一个就是一定要动手, ...

  9. 七天学会SALTSTACK自动化运维 (3)

    七天学会SALTSTACK自动化运维 (3) 导读 SLS TOP.SLS MINION选择器 SLS文件的编译 总结 参考链接 导读 SLS SLS (aka SaLt State file) 是 ...

随机推荐

  1. [高清] Java编程思想第四版完整中文高清版

    ------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...

  2. Web Api 转

    GET:生到数据列表(默认),或者得到一条实体数据 POST:添加服务端添加一条记录,记录实体为Form对象 PUT:添加或修改服务端的一条记录,记录实体的Form对象,记录主键以GET方式进行传输 ...

  3. 删除注册在Eureka的服务(无效,多余)

    例子:http://140.143.67.146:8000/eureka/eureka/apps/ZKR-PRODUCT/172.21.0.10:zkr-product:6868 Request Me ...

  4. js 的七大原则--单一原则、开闭原则、替换原则(一)

    一.前言: js 的七大设计原则: 1.单一原则 2.开闭原则 3.里氏替换原则 4.依赖倒转原则 5.接口隔离原则 6.合成复用原则 7.迪米尔法则 二.单一原则 1.定义:单一原则就是一个对象或者 ...

  5. 使用sequelize对数据库进行增删改查

    由于本人对于命令比较执着,所以基本都是在命令下操作的,喜欢使用命令的可以使用Cmder,需要安装.配置的可以参考这篇文章: https://www.cnblogs.com/ziyoublog/p/10 ...

  6. c#指定长度切割字符串,返回数组

    public List<string> subStringByCount(string text, int count) { ;//开始索引 ;//结束索引 double count_va ...

  7. iview表单数字验证

    sort: [ {required: true, message: '请填写栏目排序', trigger: 'blur'}, {type: 'number', message: '请输入数字', tr ...

  8. Linux命令——df

    参考:12 Useful “df” Commands to Check Disk Space in Linux 简介 df用于查看文件系统磁盘空间使用情况. df 读取的数据几乎都是针对一整个文件系统 ...

  9. Alternative method of unlocking the bootloader - without code from HUAWEI

    原文:https://forum.xda-developers.com/p8lite/general/alternative-method-unlocking-bootloader-t3799294 ...

  10. Linux下 启动tomcat 时候同时日志命令

    ./startup.sh && tail -f ../logs/catalina.out