Sass进阶之路,之一(基础篇)_html/css_WEB-ITnose
Jun 21, 2016 am 08:57 AM
Sass
学习Sass之前,应该要知道css预处理器这个东西,css预处理器是什么呢?
Css预处理器定义了一种新的语言将Css作为目标生成文件,然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容,变量,结构体等功能,代码更加简洁易于维护。
那么css预处理器与Sass有什么关系呢,Sass就是属于css预处理器中的一种,还有两款他们分别是Less和 Stylus,这里就不做过多的介绍了.
什么是Sass
- sass是一种css的开发工具,提供了很多便利的写法,不但使css开发变得简单和可维护,而且还大大节省了开发时间.
Sass与Css
- css算不上一门真正的编程语言,无法完成嵌套,继承,设置变量等工作.
- Sass是对css进行预处理的“中间语言”,为了弥补css的不足
.scss和.sass
- .sass
- 最初它是为了配合haml而设计,所以和haml有着一样的缩进式风格
- .scss
- 从第三代开始,保留缩进式风格,完全向下兼容普通的css代码
什么是 Compass
Compass是Sass的工具库,详情请点击 这里
- Sass与Compass
- Sass与Compass的关系,类似于JavaScript和JQuery的关系.
- Sass与Compass能做什么?
- Sass与Compass的安装
- 国内需要FQ
- 没钱FQ的可以使用淘宝的镜像,改变source 就可以了
- $ gem sources --add https://ruby.taobao.org/ --remove https://rubygems.org/
- 执行命令 gem install compass来安装compass,安装compass的时候,也会把sass一起装上.
- 执行命令 compass -v查看是否安装成功,安装成功会在控制台输出版本号.
- 执行命令 sass -v查看是否安装sass成功,安装成功会在控制台输出版本号.
Sass基础语法
- 编译scss
- sass
- sass
- 输出风格一共有四种
1. nested
1 |
|
2. expanded
1 |
|
3.compact
1 |
|
4.compressed
- 主要用于生产线
1 |
|
利用sass命令来监视文件和文件夹
- 监视Sass文件:
- sass --watch
:
- sass --watch
- 监视文件夹
- sass --watch
:
- sass --watch
使用compass编译sass
- 创建compass目录执行 compass create folderName
- 查看创建好的目录结构可以看出,该命令共创建了两个文件夹,
- 分别是sass和stylesheets,这两个文件夹前者是用来放sass文件,后者则是用来存储编译好的css文件.
- 只需要把相关的scss放进sass文件夹内,执行 compass compile命令就可以编译了,编译好的文件会自动放在 stylesheets文件夹内
- 监视文件夹
- 执行命令 compass watch
- 如果加上后缀–force的话表示不管文件更改还是不更改都会重新编译文件
- compass watch --force
- 设置中文不报错
- 路径根据自己的安装ruby的目录来进行寻找,每个人电脑都不一样
- C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.20\lib\sass\engine.rb
- 添加如下代码 Encoding.default_external = Encoding.find('utf-8')
Sass Start
1.sass使用块级作用域
2.变量分为局部变量和全局变量
- 如果在一个块级作用域里面声明一个变量,要在另一个块级作用域使用的话必须加上 !global,否则如果在另一个块级作用域使用此变量会报错.
1 |
|
3.变量默认值
- 在变量后面,分号前面加上 !default
- 作用: 如果首先定义了一个变量 $color: red,那么第二次继续赋值为 $color: green,此时 $color的值为 green, 如果第二次赋值的时候在变量后面加上一个 !default标识的话,就不会覆盖上次的赋值.这说明,加上 !default标识的语句会被优先编译和赋值.
- 下面代码是没有加default
1 |
|
- 下面代码加上了 !default
1 |
|
4. 多值变量
4.1 nth: 语法 nth(variable,index);
- 需要注意的是它的索引是从1开始的
1 |
|
4.2 map-get: 语法 map-get(variable, key)
- variable语法 $maps: (borderColor: red, backgroundColor: blue);
- 有两点需要注意一下
- 当variable错误的时候,会报错
- 当key不存在的时候,不会编译这条语句,也就是说这条css不会编译出来
1 |
|
5. 变量的特殊用法
5.1 变量用在属性或者选择器上
- 当变量挡住属性来使用的时候 #{变量名}
- 当变量当做类名来使用的时候’.#{变量名}{}’
1 |
|
5.2 变量的使用中横线还是下划线,都是一个变量 怎么用取决于你的爱好
1 |
|
6.样式导入
6.1 部分文件
- 部分文件的名称约定以下划线开头
- 以下划线卡头的文件名称不会被编译
6.2 导入文件
- 因为原生导入css的方式和sass使用的关键词一致,为了区分使用了一些约定
- 原生css导入
- 如果导入的文件名称以css结尾
- 如果被导入的文件的名称是一个URL地址
- 被导入的文件的名字是css的url()的值
- 以下三种情况会直接生成css,不作任何变化,会被当做原生的css导入
1 |
|
- scss文件导入
1 |
|
7.scss嵌套常用
- & 相当于this
- @at-root跳出嵌套
- 默认的 @at-root只能跳出选择器嵌套,不能跳出 @media和 @support
- 如果需要跳出这两个嵌套的话需要设置 @at-root(without: media)和 @at-root(without: support)
- 这个语法关键词有四个
- all表示所有的
- rule表示常规的
- media表示media
- support表示support,目前@support还无法广泛的使用
- 我们的默认的 @at-root,其实就是 @at-root(without: rule)
1 |
|
- &和 @at-root的嵌套用法
1 |
|
8. 继承
8.1 简单继承
- 使用关键字 @extend selector,代码如下
1 |
|
8.2 多继承
- 同简单继承类似,语法: @extend selector1, selector2…………
1 |
|
8.3 链型继承
- 什么是链式继承呢,按照自己的理解为,假如 c继承 b, b继承 a,那么 c同时拥有 b和 a的属性.这看起来像一条链条
1 |
|
8.4 继承局限性
- 无法继承
- 兄弟选择器是无法继承的( .one + .two)
- 包含选择器也是无法继承的( .one .two {})
- 多余继承
- 如果有hover属性,那么同样的hover属性也会被继承下来
8.5 继承交叉合并
- 同时继承两个选择器,但是,这两个选择器在同一条语句上面,就形成了 交叉继承.
- 这种用法不太容易控制,应当避免这种用法
1 |
|
8.6 继承作用域
- 假如你在media里面定义了一个样式,那么此样式不能继承media之外的选择器.
1 |
|
9. 占位选择器
- %表示占位选择器, 不会生成到架构里面,只有用到它的时候才会生成
1 |
|
好了基础篇完结了,接下来是进阶之路,依次会介绍数据类型,变量操作和内置函数等等, 写博客好费劲,我要坚持,坚持,咬牙坚持.作者的水平有限,文中若有疏漏,还请多多批评..谢谢!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; mètre & gt; élément?

Quel est le but du & lt; datalist & gt; élément?

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?

Quel est le but du & lt; Progress & gt; élément?
