sass高级语法
github地址:https://github.com/lily1010/sass/tree/master/course03
用到的sass语法是:
sass --watch test.scss:test.css --style expanded
如下图:
1 导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明
test.scss内容是:
@import "lili.scss"; //导入一个文件
@import "lili.scss", "haha.scss"; //导入两个文件
/*但在以下情况下, 仅作为普通的 CSS @import 规则语句,不会导入任何 Sass 文件。
*(1) 如果文件的扩展名是 .css。
*(2) 如果文件名以 http:// 开始。
*(3) 如果文件名是 url()
*(4)如果@import 中包含任何的媒体查询(media queries)
*/
@import "lili.css";
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen; /*在import里面插入动态变量,但是仅适用于url方式*/
$name:family;
@import url("http://fonts.googleapis.com/css?family=#{$name}"); /*导入scss文件,却不需要将它编译为css文件做法:
*(1)新建一个文件夹,为了将不需要编译的文件和需要编译的文件分开,这点千万注意
*(2)在已经建好的文件夹里面,将不要编译的*.scss文件命名为_*.scss
*(3)导入的时候不要用下划线,直接@import("新建文件夹名字/*.scss")
*/
其中lili.scss内容是:
.test1 {
color: black;
}
其中haha.scss内容是:
.test11 {
color: deeppink;
}
编译成test.css内容是:
@import url(lili.css);
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;
@import url("http://fonts.googleapis.com/css?family=family");
.test1 {
color: black;
} .test1 {
color: black;
} .test11 {
color: deeppink;
}
2 extend函数,不只继承类名选择器的样式,还继承与它相关的样式,包括继承它的父选择器
test.scss内容是:
.test2 {
border: 1px #f00;
background-color: #fdd;
}
.test2.test21 {
background-image: url("/image/hacked.png");
}
.test2 .test22 {
background-image: url("/image/haha.png");
}
html .test2 {
width: 100px;
}
.lili {
@extend .test2;
border-width: 3px;
}
编译成test.css内容是:
.test2, .lili {
border: 1px #f00;
background-color: #fdd;
} .test2.test21, .test21.lili {
background-image: url("/image/hacked.png");
} .test2 .test22, .lili .test22 {
background-image: url("/image/haha.png");
} html .test2, html .lili {
width: 100px;
} .lili {
border-width: 3px;
}
3 extend函数,继承单元素选择器样式,同时继承与它相关的样式,包括继承它的父选择器
test.scss内容是:
a:hover {
color: green;
}
a.class1:hover {
height: 10px;
}
html a:hover {
width: 10px;
}
.test3 {
@extend a:hover;
width: 20px;
}
编译成test.css内容是:
a:hover, .test3 {
color: green;
} a.class1:hover, .class1.test3 {
height: 10px;
} html a:hover, html .test3 {
width: 10px;
} .test3 {
width: 20px;
}
4 extend中链式扩展
test.scss内容是:
.test4 {
width:20px;
}
.test41 {
@extend .test4;
height: 20px;
}
.test42 {
@extend .test41;
top:20px;
}
编译成test.css内容是:
.test4, .test41, .test42 {
width: 20px;
} .test41, .test42 {
height: 20px;
} .test42 {
top: 20px;
}
5 占位符%,%不会被编译到css里面
test.scss内容是:
.test5 a%name {
width: 100px;
}
.lili {
height: 200%;
@extend %name;
}
编译成test.css内容是:
.test5 a.lili {
width: 100px;
} .lili {
height: 200%;
}
6 extend中防止继承不存在的样式出错,用!optional直接跳过空样式
test.scss内容是:
.test6 {
@extend noexist!optional;
height: 100px;
}
编译成test.css内容是:
.test6 {
height: 100px;
}
7 @at-root指令导致一个或多个规则被限定输出在文档的根层级上,而不是被嵌套在其父选择器下
test.scss内容是:
.test7 {
height: 20px;
@at-root {
.children1 {
color: red;
}
.children2 {
color: black;
}
}
}
编译成test.css内容是:
.test7 {
height: 20px;
}
.children1 {
color: red;
} .children2 {
color: black;
}
8 @at-root(without:类名)将选择器移动到嵌套指令之外
test.scss内容是:
.gaga {
@media name {
.page {
width: 8px;
@at-root (without: media) { //注意此处目前测试是不支持类名的,比如.test8
color: red;
}
}
}
}
编译成test.css内容是:
@media name {
.gaga .page {
width: 8px;
}
}
.gaga .page {
color: red;
}
9 if条件判断,注意不支持if...else...
test.scss内容是:
.test8 { //if...if..
@if 1+1 == 2 {
width: 20px;
}
@if 5 < 3 {
width: 100px;
}
}
.test81 { //if...else if...
@if 1+1 != 2 {
width: 20px;
}
@else if 5 > 3 {
width: 100px;
}
}
.test82 { //if...else if...else...
@if 1+1 != 2 {
width: 20px;
}
@else if 5 < 3 {
width: 100px;
}
@else {
width: 10px;
}
}
编译成test.css内容是:
.test8 {
width: 20px;
} .test81 {
width: 100px;
} .test82 {
width: 10px;
}
10 for循环语句
test.scss内容是:
//第一种格式 @for $var from <start> through <end>,注意范围包括<start>和<end>的值
@for $i from 1 through 3 {
.gray#{$i*3} {
color: #333*$i;
}
} //第二种格式 @for $var from <start> to <end>,注意范围从<start>开始运行,但不包括<end>的值
@for $i from 1 to 4 {
.gray2#{$i*3} {
color: #333*$i;
}
}
编译成test.css内容是:
.gray3 {
color: #333333;
} .gray6 {
color: #666666;
} .gray9 {
color: #999999;
} .gray23 {
color: #333333;
} .gray26 {
color: #666666;
} .gray29 {
color: #999999;
}
11 each循环语句 @each $var in <list or map>
test.scss内容是:
$name:"lili","yaya","sansa"; //注意数组list的写法
@each $i in $name {
test9.#{$i} {
width: 10px;
}
} $name2:(name21:"lili",name22:"yaya",name23:"sansa"); //注意对象map的写法
@each $i in $name2 {
test9.#{$i} {
width: 10px;
}
} $name3:(name31:1,name32:2,name33:3); //注意对象map的写法
@each $key,$value in $name3 {
test9.#{$key} {
width: 10px*$value;
}
}
编译成test.css内容是:
test9.lili {
width: 10px;
} test9.yaya {
width: 10px;
} test9.sansa {
width: 10px;
} test9.name21 lili {
width: 10px;
} test9.name22 yaya {
width: 10px;
} test9.name23 sansa {
width: 10px;
} test9.name31 {
width: 10px;
} test9.name32 {
width: 20px;
} test9.name33 {
width: 30px;
}
12 while循环语句
test.scss内容是:
$i:3;
@while $i > 0 {
.gray#{$i} {
color: #333*$i;
}
$i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
}
编译成test.css内容是:
.gray3 {
color: #999999;
} .gray2 {
color: #666666;
} .gray1 {
color: #333333;
}
13 混入指令,实现代码块复用
test.scss内容是:
@mixin left01 { //不带参数
float: left;
}
.test10 {
@include left01;
} @mixin left02($left) { //带1个参数
float: $left;
}
.test101 {
@include left02(left);
} @mixin left03($left,$width) { //带2个参数,或者说参数为数组
float: $left;
.lili {
width: $width;
}
}
.test102 {
@include left03(left,100px);
} @mixin left04($name31,$name32,$name33) { //参数为对象,但是接受传递的参数必须是对象相对应key,同时需要用...传递参数
.lili {
width: $name31;
height: $name32;
top: $name33;
}
}
$map:(name31:"1px",name32:"2px",name33:"3px");
.test103 {
@include left04($map...);
} @mixin left05($left:right) { //带默认参数,不传参的话就用默认参数
float: $left;
}
.test104 {
@include left05;
} @mixin box-shadow($shadows...) { //不定参数,用...
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译成test.css内容是:
.test10 {
float: left;
} .test101 {
float: left;
} .test102 {
float: left;
}
.test102 .lili {
width: 100px;
} .test103 .lili {
width: "1px";
height: "2px";
top: "3px";
} .test104 {
float: right;
} .shadows {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
14 传递内容块@content到混入,传递到@content位置
test.scss内容是:
@mixin lala {
html {
color: #888;
@content;
}
}
@include lala { //此处名字必须和上面保持一致
.logo {
font-size: 15px;
}
}
编译成test.css内容是:
html {
color: #888;
}
html .logo {
font-size: 15px;
}
15 变量在混入@mixin的作用域,即传递给混入(mixin)的内容块在其被定义的作用域中进行运算,而不是混入(mixin)的作用域。这意味着混入(mixin)的局部变量不能传递给样式块使用
test.scss内容是:
$color: white;
@mixin haha($color:black) {
background-color: $color;
@content;
}
.test12 {
@include haha{
color: $color;
}
}
编译成test.css内容是:
.test12 {
background-color: black;
color: white;
}
16 函数,用法类似@mixin
test.scss内容是:
@function sasa($name) {
@return $name;
}
.test13 {
font-size: sasa(15px);
}
编译成test.css内容是:
.test13 {
font-size: 15px;
}
sass高级语法的更多相关文章
- sass高级语法的补充
1. 继承 2.混入 3.函数 我这篇博客需要点基础才能看懂, 但我这篇博客是对上一篇的 sass高级语法 的补充 从这方面来看也无所谓了
- sass笔记-2|Sass基础语法之让样式表更具条理性和可读性
这一篇主要详述保持sass条理性和可读性的3个最基本方法--嵌套.导入和注释. 零. 变量 变量本身的作用是为了保持属性值的可维护性,把所有需要维护的属性值放在同一个地方,快速更改,处处生效,可谓售后 ...
- sass 基本语法
sass语法 文件后缀名 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号:另一种就是我们这里使用的scss文件,这种和我们平时写的css文件格式差不多,使用大括号和分号. 而本教程 ...
- 009 webpack将ES高级语法进行装换
一:ES高级转换 1.main.js中的js不能解析 // js的主要入口 import $ from 'jquery' import './css/index.css' import './css/ ...
- tn文本分析语言(三):高级语法
标签(空格分隔): 未分类 高级操作 1.脚本表达式 用双引号包含的脚本被称为脚本表达式,目前支持嵌入Python. 脚本表达式只能在顺序表达式中使用.代码可以在三个位置存在: |位置|功能|例子| ...
- Swift高级语法学习总结(转)
Swift高级语法学习总结 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如果有参数和返回值直接写在两个括号里就可以了 1.2 参 ...
- CSS 高级语法 ---- 继承和选择器的分组
1. 选择器的分组 ————————————————————————— 可以对选择器进行分组,被分组的选择器享用共同的声明. h1,h2,h3,h4,h5,h6 { color: green; ...
- Swift高级语法学习总结
Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.函数 1.1 func funcNmae()->(){} 这样就定义了一个函数,它的参数为空,返回值为空,如 ...
- C++ 高级语法学习与总结(代码实例)
C++11增加了许多的特性,auto就是一个很明显的例子. 还有就是typedid()获取数据变量的类型 看下面简短的代码: atuo: 很像java中的加强for循环..... //获取一个数据 ...
随机推荐
- 整理的一些PHP面试题目
1.strlen()和mb_strlen()的作用分别是什么? strlen()和mb_strlen()的作用都是来获取字符串的长度,其中strlen()只针对单字节编码字符,也就是计算字符串的总字节 ...
- Sparse Filtering 学习笔记(一)网络结构与特征矩阵
Sparse Filtering 是一个用于提取特征的无监督学习算法,与通常特征学习算法试图建模训练数据的分布的做法不同,Sparse Filtering 直接对训练数据的特征分布进行分析,在所谓 ...
- QT学习笔记3
对话框 新建了一个对话框,在新建项目选择类型时是Dialog即可. 添加的代码如下,注意QCheckBox 并没有添加头文件定义,只是加了类的前向声明.因为我们仅仅使用的是指针,并不涉及到这些类的函数 ...
- 关于SQL递归查询在不同数据库中的实现方法
比如表结构数据如下: Table:Tree ID Name ParentId 1 一级 0 2 二级 1 3 三级 2 4 四级 3 SQL SERVER 2005查询方法: //上查 with ...
- 【原创】Kakfa cluster包源代码分析
kafka.cluster包定义了Kafka的基本逻辑概念:broker.cluster.partition和replica——这些是最基本的概念.只有弄懂了这些概念,你才真正地使用kakfa来帮助完 ...
- 十年微软(Microsoft)MVP
十年微软(Microsoft)MVP,七月一日收到邮件,今早收到从美国微软寄过来的证书!
- The conversion of a varchar data type to a datetime data type resulted in an out-of-range value
刚刚有在程序中,传递一个空值至MS SQL Server数据库,这个值的数据类型为DATETIME执行时,它却发生了如标题提示的异常:The conversion of a varchar data ...
- .Net(C#)最简单的邮件发送案例
一.序言 刚开始接触邮件发送功能的时候,在网上找的资料都挺复杂的!对于新手入门有点难(至少对于本人来说,第一次接触的时候确实不容易).这里就写一段简单的邮箱发送代码,备忘,也给新手一个参考(相关类的字 ...
- .net微信公众号开发——消息与事件
作者:王先荣 本文介绍如何处理微信公众号开发中的消息与事件,包括:(1)消息(事件)概况:(2)验证消息的真实性:(3)解析消息:(4)被动回复消息:(5)发送其他消息. 开源项目地址:h ...
- thinkphp端口配置
<?php return array( //'配置项'=>'配置值' 'MODULE_ALLOW_LIST' => array('Home'), 'DEFAULT_MODULE' = ...