2.sass变量、嵌套、混合(mixin)、继承拓展、@import、comment
变量、嵌套、混合(mixin)、继承拓展、@import、comment
变量的意义
在sass里我们可以定义多个变量来存放颜色、边框等等的样式,这样就可以在下面想要使用样式的时候使用变量了
这样的优点就是便于维护,更改方便
变量的使用
可以通过$来定义变量,在变量名字中可以使用-和_来作为连接,并且-和_是可以互通的,就是用起来一模一样。
变量的值可以是字符串、数字、颜色等等,在变量里还可以使用其他变量,使用的时候直接写变量名就好了
例如
$primary-color:#ff6600; $primary-border:1px solid $primary_color; div.box{ background:$primary-color; } h1.page-header{ border:$primary-border; }
---》
div.box { background: #ff6600; } h1.page-header { border: 1px solid #ff6600; }
嵌套的使用
合理的使用嵌套语法,可以使我们编写代码更为快捷
假设我们想写这样的css:
.nav { height: 100px; } .nav ul { margin: 0; } .nav ul li { float: left; list-style: none; padding: 5px; }
在sass里我们可以这样写
.nav{ height:100px; ul{ margin:0; li { float:left; list-style:none; padding:5px; } } }
大家会发现,写出来的代码父和子之间都有空格隔开,如果我们需要给a加上伪类的话我们这样写
.nav{ height:100px; a{ color:#fff; :hover{ color:#ff6600; } } }
在里面就会出现这样的情况
.nav a :hover { color: #ff6600; }
我们发现在a和:hover之间有了空格,这样是不好的,所以我们需要在写的时候在:hover之前把a加上,这样就需要用到在之类里引用父类选择器的方式,我们可以用&符号代替父类
例如:
.nav{ height:100px; a{ color:#fff; &:hover{ color:#ff6600; } } }
这样就好了,下面来个完整的代码:
.nav{ height:100px; ul{ margin:0; li{ float:left; list-style:none; padding:5px; } a{ display:block; color:#000; &:hover{ color:#f60; background:red; } } } & &-text{ font-size:15px; } }
-----》
.nav { height: 100px; } .nav ul { margin: 0; } .nav ul li { float: left; list-style: none; padding: 5px; } .nav ul a { display: block; color: #000; } .nav ul a:hover { color: #f60; background: red; } .nav .nav-text { font-size: 15px; }
嵌套属性
我们可以把一些个复合属性的子属性来嵌套编写,加快编写速度,例如
body{ font:{ family:Helvitica; size:15px; weight:bold; } } .nav{ border:1px solid red{ left:none; right:none; } } .page-next{ transition:{ property:all; delay:2s; } }
-----》
body { font-family: Helvitica; font-size: 15px; font-weight: bold; } .nav { border: 1px solid red; border-left: none; border-right: none; } .page-next { transition-property: all; transition-delay: 2s; }
mixin 混合
你可以把它想象成一个有名字的定义好的样式
每一个mixin都有自己的名字,类似于js里的函数定义方法如下
@mixin 名字(参数1,参数2...){ ... }
使用方法是在其他选择器css样式里通过@include引入,其实就相当于将mixin里的代码写入到这个选择器的css里,如下:
@mixin alert { color:#f60; background-color:#f60; a{ color:pink; } &-a{ color:red; } } .alert-warning{ @include alert; }
-----》
.alert-warning { color: #f60; background-color: #f60; } .alert-warning a { color: pink; } .alert-warning-a { color: red; }
刚才是没有参数的mixin,mixin也可以拥有参数,需要注意的是:
- 形参的名字前要加$
- 传参的时候只写值的话要按顺序传
- 传参的时候不想按顺序的话需要加上形参名字
例如:
@mixin alert($color,$background) { color:$color; background-color:$background; a{ color:darken($color,10%);//把颜色加深百分之十 } } .alert-warning{ @include alert(red,blue); } .alert-info{ @include alert($background:red,$color:blue); }
------》
.alert-warning { color: red; background-color: blue; } .alert-warning a { color: #cc0000; } .alert-info { color: blue; background-color: red; } .alert-info a { color: #0000cc; }
继承拓展 extend
如果我们有一个选择器想要拥有另一个选择所有的东西,不管是样式还是子元素等等,可以使用@extend来继承
大家需要注意的是,++b继承a的时候,a的子元素设置了样式,也会给b的子元素设置样式++,达到完全一样的情况,例如:
.alert { padding:5px; } .alert a { font:{ weight:bold; size:15px; } } .alert-info { @extend .alert; backgournd:skyblue; }
----》
.alert, .alert-info { padding: 5px; } .alert a, .alert-info a { font-weight: bold; font-size: 15px; } .alert-info { backgournd: skyblue; }
partials
在以前咱们编写css的时候,一个css引入另一个css需要使用@import,其实这是不好的,会多发一次http请求,影响咱们站点的响应速度。
在sass里,咱们可以把小的sass文件分出去,叫做partials,在某个sass里通过@import ‘partials名’去引入,注意路径哟,这样的话就可以把partials里的代码引到咱们大的sass里一起编译
- 需要注意的是 partials的文件名前要加_
body{ margin:0; padding:0; }style.sass :
@import "base"; .alert { padding:5px; } .alert a { font:{ weight:bold; size:15px; } } .alert-info { @extend .alert; backgournd:skyblue; }
----------->
body { margin: 0; padding: 0; } .alert, .alert-info { padding: 5px; } .alert a, .alert-info a { font-weight: bold; font-size: 15px; } .alert-info { backgournd: skyblue; }
这样的话我们就可以把模块化的思想引入到sass里了
comment注释
sass里的注释有三种
- 多行注释
- 单行注释
- 强制注释
多行注释:压缩后不会出现在css里 /* */
单行注释: 不会出现在css里 //
强制注释:压缩后也会出现在css里 /! /
- Yii2.0实用功能技巧解密之——布局文件多变量继承(嵌套、引用)终极功能
- Yii2.0实用功能技巧解密之——布局文件多变量继承(嵌套、引用)终极功能
- sass实战演练02 - 嵌套、mixin、变量计算、颜色函数
- Sass变量、嵌套、混和宏、继承、占位符
- 四.OC基础--1.文档安装和方法重载,2.self和super&static,3.继承和派生,4.实例变量修饰符 ,5.私有变量&私有方法,6.description方法
- MFC_"#import ,#pragma comment ,LoadLibrary"三种引入dll的方式都分别在什么时候使用?
- Sass Guidelines中文版本之六:变量、扩展、混合宏
- 如果类a继承类b,实现接口c,而类b和接口c中定义了同名变量,请问会出现什么问题?(瞬联)
- 关于JAVA继承类的静态变量、成员变量、父子类构造方法调用顺序的研究
- PHP之新手自学基础知识(五)——拓展篇之魔术变量及魔术函数
- LESS 让css也支持变量,运算符,include,嵌套规则等等
- Kotlin学习记录(二)—— Kotlin的变量、属性、类、构造函数、继承、方法
- 谈谈java中成员变量与成员方法继承的问题
- 子类私有变量的继承问题
- 消息发送 环境变量继承
- 设计原则:请重新审视“多重继承”,找机会拥抱一下“掺入(Mixin)”
- Java类的嵌套:外部类的方法不能访问内部类的变量
- 父子bash的环境变量和自定义变量继承问题
- Sass混合宏、继承、占位符
- 关于 thinkphp import 文件内容变量失效问题