好程序员web前端培训分享JavaScript学习笔记SASS
好程序员web 前端培训分享 JavaScript 学习笔记 SASS ， 世界上最成熟、最稳定、最强大的专业级CSS 扩展语言！
10年的大田网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整大田建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“大田网站设计”,“大田网站推广”以来，每个客户项目都认真落实执行。
· sass 是一个 css 的预编译工具
· 也就是能够 更优雅 的书写 css
· sass 写出来的东西 浏览器不认识
· 依旧是要转换成 css 在浏览器中运行
· 这个时候就需要一个工具来帮我们做
安装 sass 环境
· 以前的 sass 需要依赖一个 ruby 的环境
· 现在的 sass 需要依赖一个 python 的环境
· 但是我们的 node 强大了以后，我们只需要依赖 node 环境也可以
· 需要我们使用 npm 安装一个全局的 sass 环境就可以了
# 安装全局 sass 环境
$ npm install sass -g
编译 sass
· 有了全局的 sass 环境以后
· 我们就可以对 sass 的文件进行编译了
· sass 的文件后缀有两种，一种是 .sass 一种是 .scss
· 他们两个的区别就是有没有 {} 和 ;
· .scss 文件
h2 {
width : 100 px ;
height : 200 px ;}
· .sass 文件
h2 width : 100 px height : 200 px
· .scss 文件
h2 { width : 100 px ; height : 200 px ;}
· 我们比较常用的还是 .scss 文件
· 因为 .sass 我们写不习惯，当然，如果你能写习惯也比较好用
· 我们先不管里面的的什么内容，至少这个 .scss 或者 .sass 文件浏览器就不认识
· 我们就要用指令把 这两种 文件变成 css 文件
# 把 index.scss 编译 ， 输出成 index.css$ sass index.scss index.css
· 这样我们就能得到一个 css 文件，在页面里面也是引入一个 css 文件就可以了
实时编译
· 我们刚才的编译方式只能编译一次
· 当你修改了文件以后要从新执行一遍指令才可以
· 实时编译就是随着你文件的修改，自动从新编译成 css 文件
· 也是使用指令来完成
# 实时监控 index.scss 文件，只要发生修改就自动编译，并放在 index.css 文件里面
$ sass --watch index.scss:index.css
· 然后你只要修改 index.scss 文件的内容， index.css 文件中的内容会自动更新
实时监控目录
· 之前的实时监控只能监控一个文件
· 但是我们有可能要写很多的文件
· 所以我们要准备一个文件夹，里面放的全部都是 sass 文件
· 实时的把里面的每一个文件都编译到 css 文件夹里面
· 依旧是使用指令的形式来完成
# 实时监控 sass 这个目录，只要有变化，就会实时响应在 css 文件夹下
$ sass --watch sass:css
· 这样，只要你修改 sass 文件夹下的内容，就会实时的相应在 css 文件夹中
· 你新添加一个文件也会实时响应
· 但是你删除一个文件，css 文件夹中不会自动删除，需要我们自己手动删除
sass 语法
· 我们能编译 sass 文件了，接下来我们就该学习一下 sass 的语法了
· 为什么他这么强大，这么好用，都是靠强大的语法
· .sass 和 .scss 文件的语法是一样的，只不过区别就是 {} 和 ;
变量
· 定义一个变量，在后面的代码中使用
· 使用 $ 来定义变量 // 定义一个 $c 作为变量，值是 红色
$c : red ; h2 {
// 在使用 $ c 这个变量 color : $c ;}
· 上面定义的变量全局都可以使用
· 我们也可以在规则块内定义私有变量
h2 {
// 这个 $ w 变量只能在 h2 这个规则块中使用 $w : 100 px ; width : $w ;}
嵌套
· sass 里面我们最长用到的就是嵌套了
· 而且相当的好用
h2 {
width : 100 px ;
div {
width : 200 px ;
} } // 编译结果h2 {
width : 100 px ;} h2 div {
width : 200 px ;}
· 这个就是嵌套，理论上可以无限嵌套下去
ul {
width : 100 px ;
li {
width : 90 px ;
div {
width : 80 px ;
p {
width : 70 px ;
span: {
color: red ;
}
}
}
}}
嵌套中的 &
· 在嵌套中还有一个标识符是 & 我们可以使用
· 先来看一个例子
div { width : 100 px ; height : 100 px ;
:hover { width : 200 px ;
}} // 我想的是 div 被鼠标悬停的时候 width 变成 200 // 但是编译结果却是div { width : 100 px ; height : 100 px ;} div :hover { width : 200 px ;}
· 和预想的结果不一样了
· 这个时候就要用到 & 来连接了
div { width : 100 px ; height : 100 px ;
& :hover { width : 200 px ;
}} // 编译结果div { width : 100 px ; height : 100 px ;} div :hover { width : 200 px ;}
· 这个时候就和我需要的一样了
群组嵌套
· 群组嵌套就是多个标签同时嵌套
div {
width : 100 px ;
.box1, .box2, .box3 {
color : red ;
} } // 编译结果div {
width : 100 px ;} div . box1 , div . box2 , div . box3 {
color : red ;}
· 还有一种就是多个标签同时嵌套一个标签
h2 , h3 , h4 { width : 100 px ;
.box { color : red ;
}} // 编译结果h2 , h3 , h4 { width : 100 px ;} h2 .box , h3 .box , h4 .box { color : red ;}
嵌套属性
· 在 scss 里面还有一种特殊的嵌套
· 叫做 属性嵌套
· 和选择器嵌套不一样，是写属性的时候使用的
div { border : { style : solid ; width : 10 px ; color : pink ;
}} // 编译结果div { border-style : solid ; border-width : 10 px ; border-color : pink ;}
· 这个属性嵌套还可以有一些特殊使用
div { border : 1 px solid #333 { bottom : none ;
}} // 编译结果div { border : 1 px solid #333 ; border-bottom : none ;}
混入
· 也叫 混合器
· 其实就是定义一个 “函数” 在 scss 文件中使用
// 定义一个混合器使用 @ mixin 关键字 @mixin radius { -webkit-border-radius : 10 px ; -moz-border-radius : 10 px ; -ms-border-radius : 10 px ; -o-border-radius : 10 px ; border-radius : 10 px ;}
· 上面是定义好的一个混合器
· 他是不会被编译的，只有当你使用了他以后，才会被编译
// 使用混合器使用 @ include 关键字div { width : 100 px ; height : 100 px ;
@ include radius ; }
· 这个就是吧刚才定义的混合器拿过来使用
· 编译结果
div { width : 100 px ; height : 100 px ; -webkit-border-radius : 10 px ; -moz-border-radius : 10 px ; -ms-border-radius : 10 px ; -o-border-radius : 10 px ; border-radius : 10 px ;}
混合器传参
· 我们既然说了，混合器就像一个 “函数” 一样，那么就一定可以像 “函数” 一样传递参数
· 和 “函数” 的使用方式一样，在定时的时候是 “形参”，在调用的时候是 “实参”
// 定义混合器 @mixin my_transition ( $pro , $dur , $delay , $tim ) { -webkit-transition : $pro $dur $delay $tim ; -moz-transition : $pro $dur $delay $tim ; -ms-transition : $pro $dur $delay $tim ; -o-transition : $pro $dur $delay $tim ; transition : $pro $dur $delay $tim ;}
· 使用这个混合器的时候传递 “实参”
div { width : 100 px ; height : 100 px ;
@ include my_transition ( all , 1s , 0s , linear ); }
· 编译结果
div {
width : 100 px ;
height : 100 px ;
-webkit-transition : all 1 s 0 s linear ;
-moz-transition : all 1 s 0 s linear ;
-ms-transition : all 1 s 0 s linear ;
-o-transition : all 1 s 0 s linear ;
transition : all 1 s 0 s linear ;}
· 写了多少个 “形参”，那么调用的时候就要传递多少个 “实参”
· 不然会报错的
参数默认值
· 我们在定义混合器的时候，也可以给一些参数写一些默认值
· 这样一来，就可以不传递 “实参” 了
// 设置一些带有默认值的参数 @mixin my_transition ( $dur : 1 s , $pro : all , $delay : 0 s , $tim : linear) {
-webkit-transition : $ dur $ pro $ delay $ tim ;
-moz-transition : $ dur $ pro $ delay $ tim ;
-ms-transition : $ dur $ pro $ delay $ tim ;
-o-transition : $ dur $ pro $ delay $ tim ;
transition : $ dur $ pro $ delay $ tim ; }
· 使用的时候，如果你不传递，那么就是使用默认值
div { width : 100 px ; height : 100 px ;
// 使用的时候 ， 只传递一个 ， 剩下的使用默认值
@ include my_transition ( 2s ); }
· 编译结果
div {
width : 100px ;
height : 100px ;
-webkit-transition : 2s all 0s linear ;
-moz-transition : 2s all 0s linear ;
-ms-transition : 2s all 0s linear ;
-o-transition : 2s all 0s linear ;
transition : 2s all 0s linear ; }
继承
· 在 sass 里面使用继承可以大大的提高开发效率
· 其实继承很简单，就是把之前写过的选择器里面的内容直接拿过来一份
div {
width : 100 px ;
height : 100 px ;
background-color : pink ;}
· 这个是之前写过的一个规则样式表
· 接下来我要写另外一个样式了，发现我要写的一些内容和之前这个 div 一样，并且还有一些我自己的内容
· 那么我就可以把这个样式表先继承下来，再写我自己的内容就好了
p {
@extend div ;
font-size : 20px ;
color : red ; }
· 编译结果
div , p {
width : 100 px ;
height : 100 px ;
background-color : pink ;} p {
font-size : 20 px ;
color : red ;}
注释
· 在 scss 文件中的注释分为几种
1、编译的时候不会被编译的注释
// 我是一个普通注释，在编译的时候，我就被过滤了
2、编译的时候会被编译的注释
/* 我在编译的时候，会被一起编译过去 */
3、强力注释
/*! 我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在 */
导入文件
· 我们刚才学过了定义变量，定义混合器
· 而这两个内容在定义过以后，如果没有使用，是不会被编译出内容的
· 所以我们可以把变量单独写一个文件，混合器单独写一个文件，然后直接导入后使用
// 我是 variable.scss $w : 100 px ; $h : 200 px ; $c : pink ; // 我是 mixin .scss @ mixin my_transition ( $ dur : 1s , $ pro : all , $ delay : 0s , $ tim : linear ) {
-webkit-transition : $ dur $ pro $ delay $ tim ;
-moz-transition : $ dur $ pro $ delay $ tim ;
-ms-transition : $ dur $ pro $ delay $ tim ;
-o-transition : $ dur $ pro $ delay $ tim ;
transition : $ dur $ pro $ delay $ tim ; } @ mixin radius {
-webkit-border-radius : 10px ;
-moz-border-radius : 10px ;
-ms-border-radius : 10px ;
-o-border-radius : 10px ;
border-radius : 10px ; }
· 然后在我们的主要文件中把这个两个文件导入进来就行了
// 我是 index.scss @import './variable.scss' ; @import './mixin.scss' ; div {
width : $ w ;
height : $ h ;
background-color : $ c ;
@ include radius ; } h2 {
@include my_transition;}
· 编译结果
div {
width: 100px;
height: 200px;
background-color: pink;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
h2 {
-webkit-transition: 1s all 0s linear;
-moz-transition: 1s all 0s linear;
-ms-transition: 1s all 0s linear;
-o-transition: 1s all 0s linear;
transition: 1s all 0s linear;
}
分享名称：好程序员web前端培训分享JavaScript学习笔记SASS
本文来源：http://scjbc.cn/article/gsihdd.html
