[外链图片转存失败(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泛型 - 返回父类的子类

    一.栗子 public class GenericityInher { //error: Type mismatch: cannot convert from ArrayList<Child&g ...

  2. Bean管理学习笔记

    1.BeanFactory 介绍 1.1 首先什么是Bean? 1.Bean在Spring技术中是基于组件 2.他是Spring容器管理的最基本最常见的单元.在spring的应用场合中,bean可以是 ...

  3. ConsoleLoggerExtensions.AddConsole(ILoggerFactory)已过时代码修复

    0x00.问题 netcoreapp2.2环境下, Startup.cs 代码配置如下 public void Configure(IApplicationBuilder app, IHostingE ...

  4. 为新装的Centos 7X更换源,升级VIM失败,待解决

    CentOS 7X使用阿里云CentOS的yum源 1.备份原有repo文件 #cd /etc/yum.repos.d #mv /etc/yum.repos.d/CentOS-Base.repo /e ...

  5. 过渡属性transition

    过渡属性:使元素变化过程可见 transition: all 1s;元素所有变化过程都可见 transition: 1s;元素所有变化过程都可见 transition: 指定属性 2s 1s;指定属性 ...

  6. vue + element ui开发过程中需要注意的几个点

    1.实现动态的数据双向绑定 关键字[$set]在这个需求开发的过程中还遇到深度克隆的问题 2:form表单的动态字段验证 关键字[promise.all] 3:动态表单验证关键字[el-form-it ...

  7. Android多线程操作,as快捷键笔记

    Android studio 快捷键 cmd+p 快速查看该方法的参数定义 * * option + shift +上下 快速移动上下行 * * cmd + e 显示最近操作的文件 * * cmd + ...

  8. Redis配置文件详情

    # Redis 配置文件 # 当配置中需要配置内存大小时,可以使用 1k, 5GB, 4M 等类似的格式,其转换方式如下(不区分大小写) # # 1k => bytes # 1kb => ...

  9. thinkphp概述2

    thinkphp概述,thinkphp项目构建流程,thinkphp项目结构,thinkphp配置,thinkphp控制器,thinkphp模型,thinkphp视图,thinkphp的内置模板引擎. ...

  10. [nginx] nginx源码分析--SNI性能分析

    概念 我们已经知道什么是SNI,以及如何为用户配置SNI. [nginx] nginx使用SNI功能的方法 问题 通过观察配置文件,可以发现,针对每一个SSL/TLS链接, nginx都会动态的查找( ...