Sass
Sass是什么
CSS用来编写网页样式,为CSS加入编程元素,这被叫做"CSS预处理器"(css preprocessor)。
SASS (Syntactically Awesome StyleSheets)是一种动态的CSS(CSS预处理器),它扩展了 CSS 语法,定义了一套新的语法规则和函数,以加强和提升CSS。
还有一种CSS扩展语言叫 less
Sass 扩展了 css 的特性:
变量
嵌套规则
@import导入样式
@mixin 混合器及传参
@extend 继承
@if、@for、@function 等
Sass和Scss
Sass包括两套语法:
最开始的语法叫做“缩进语法”,使用缩进来区分代码块,并且用回车将不同规则分隔开;
而较新的语法叫做“SCSS”,使用和CSS一样的块语法,即使用大括号将不同的规则分开,使用分号将具体的样式分开。
通常情况下,这两套语法通过.sass和.scss两个文件扩展名区分开。
.sass文件
body
background-color: red;
font-size: 16px;
.scss文件
body{
background-color: red;
font-size: 16px;
}
此外,你仍然可以在Sass中写普通的CSS语句!
安装Sass
sass基于Ruby语言开发而成,因此安装sass前需要安装Ruby。(注:mac下自带Ruby无需在安装Ruby!)
window下安装SASS首先需要安装Ruby,先从官网下载Ruby并安装。
安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
安装完成后需测试安装有没有成功,运行CMD输入以下命令:
ruby -v
//如安装成功会打印
ruby 2.6.3p62 (2019-04-16 revision 67580) [x64-mingw32]
因为国内网络的问题导致gem源间歇性中断因此我们需要更换gem源:
//1.删除原gem源
gem sources --remove
https://rubygems.org/
//2.添加国内gem源
gem sources --add
https://gems.ruby-china.com/
//3.打印是否替换成功
gem sources -l
//4.更换成功后打印如下
*** CURRENT SOURCES ***
安装 Sass 输入下面的命令:
gem install sass
验证安装情况:
sass -v
Ruby Sass 3.7.4
Sass常用命令:
//更新sass
gem update sass
//查看sass版本
sass -v
//查看sass帮助
sass -h
编译sass
sass编译有很多种方式,如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。
命令行编译
//单文件转换命令
sass input.scss output.css
//单文件监听命令
sass --watch input.scss:output.css
//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets
命令行编译配置选项
sass内置有四种编译格式:nested、expanded、compact、compressed
/* 未编译样式 */
.box {
width: 300px;
height: 400px;
&-title {
height: 30px;
line-height: 30px;
}
}
nested 编译排版格式(嵌套的)
/*命令行内容*/
sass style.scss:style.css --style nested
/*编译过后样式*/
.box {
width: 300px;
height: 400px; }
.box-title {
height: 30px;
line-height: 30px; }
expanded 编译排版格式(展开的)
/*命令行内容*/
sass style.scss:style.css --style expanded
/*编译过后样式*/
.box {
width: 300px;
height: 400px;
}
.box-title {
height: 30px;
line-height: 30px;
}
compact 编译排版格式(紧凑的)
/*命令行内容*/
sass style.scss:style.css --style compact
/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }
compressed 编译排版格式(压缩的)
/*命令行内容*/
sass style.scss:style.css --style compressed
/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}
软件方式编译
koala 和 codekit,它们是优秀的编译器,界面清晰简洁,操作起来也非常简单。
koala是一个国产免费前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。
注:以下均为scss语法
变量
sass使用$符号来标识变量
$nav-color: #F90;
nav {
$width: 100px;
width: $width;
color: $nav-color;
}
//编译后
nav {
width: 100px;
color: #F90;
}
嵌套规则
在Sass中,你可以像俄罗斯套娃那样在规则块中嵌套规则块。
Sass允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器。
#box{
width:100px;
height:100px;
h1{
text-align:center;
}
span{
font-size:16px;
a{
color:blue
}
}
}
//编译后
#box {
width: 100px;
height: 100px;
}
#box h1 {
text-align: center;
}
#box span {
font-size: 16px;
}
#box span a {
color: blue;
}
父选择器的标识符&
a {
background-color:red;
&:hover{
font-size:60px;
}
}
//编译后
a {
background-color: red;
}
a:hover {
font-size: 60px;
}
@import导入样式
css有一个特别不常用的特性,即@import url()规则,它允许在一个css文件中导入其他css文件。然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来特别慢。
sass也有一个@import规则,但不同的是,sass的@import规则在生成css文件时就把相关文件导入进来。
@import "sidebar";这条命令将把sidebar.scss文件中所有样式添加到当前样式表中。
// a.scss
$width : 100px;
.before {
width: $width;
}
@import "b";
.after {
width: $width;
}
.container {
width: $width;
height: $height;
border: 1px solid;
}
// b.scss
$width : 200px;
$height : 200px
编译后
// a.css
.before {
width: 100px;
}
.after {
width: 200px;
}
.container {
width: 200px;
height: 200px;
border: 1px solid;
}
// bgblue.scss
aside {
background: blue;
color: white;
}
.bluebox {
@import "bgblue"
}
//生成的结果
.bluebox {
aside {
background: blue;
color: #fff;
}
}
混合器
你可以通过sass的混合器实现大段样式的重用。
@mixin no-bullets {
list-style: none;
li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
}
ul.plain {
color: #444;
@include no-bullets;
}
// 编译后:
ul.plain {
color: #444;
list-style: none;
}
ul.plain li {
list-style-image: none;
list-style-type: none;
margin-left: 0px;
}
给混合器传参
@mixin link-colors($normal, $hover, $visited) {
color: $normal;
&:hover {
color: $hover;
}
&:visited {
color: $visited;
}
}
a {
@include link-colors(blue, red, green);
}
// 编译后:
a {
color: blue;
}
a:hover {
color: red;
}
a:visited {
color: green;
}
使用选择器继承来精简CSS
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
// 编译后:
.error {
border: 1px solid red;
background-color: #fdd;
}
.seriousError {
border: 1px solid red;
background-color: #fdd;
border-width: 3px;
}
@if
// 当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
// 编译为
p {
border: 1px solid;
}
@for
// @for 指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
// 编译为
.item-1 {
width: 2em;
}
.item-2 {
width: 4em;
}
.item-3 {
width: 6em;
}
@function
// Sass支持自定义函数,并能在任何属性值或Sass script中使用:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
// 编译为
#sidebar {
width: 240px;
}
RequireJs
什么是RequireJs
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。
随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作、模块复用、单元测试等等一系列复杂的需求。
为什么使用RequireJS
模块化:模块化就是将不同功能的函数封装起来,并提供使用接口,他们彼此之间互不影响。
RequireJS,会在相关的js加载后执行回调函数,这个过程是异步的,所以可以防止js加载阻塞页面渲染。
使用程序调用的方式加载js,防出现如下丑陋的场景:
<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="w.js"></script>
<script type="text/javascript" src="m.js"></script>
"一个模块就是一个文件"
require 用来加载依赖模块,并执行加载完后的回调函数
require(['moduleA', 'moduleB'], function (moduleA, moduleB){
// ...
});
第一个参数是依赖模块列表,第二个参数是一个callback函数
require.config({
baseUrl: 'js/lib',
paths : {
"jquery" : ["
http://libs.baidu.com/jquery/2.0.3/jquery","jquery-2.1.4.min"],
"mytask" : "myTask"
}
})
require(["jquery","mytask"],function($, mytask){
$(function(){
mytask("load finished");
})
})
require.config是用来配置模块加载位置,简单点说就是给模块起一个更短更好记的名字
比如将百度的jquery库地址标记为jquery,这样在require时只需要写["jquery"]就可以加载该js
本地的js模块我们也可以这样配置
全局配置
上面的例子中重复出现了require.config配置,如果每个页面中都加入配置,必然显得十分不雅,requirejs提供了一种叫"主数据"的功能,我们首先创建一个config.js:
require.config({
baseUrl: 'js/lib',
paths : {
"jquery" : ["
http://libs.baidu.com/jquery/2.0.3/jquery","jquery-2.1.4.min"],
"mytask" : "myTask"
}
})
然后在页面中使用下面的方式来使用requirejs:
<script src="js/require.js" data-main="js/config"></script>
加载 requirejs 的 script 标签加入了data-main属性,这个属性指定的 js 将在 require.js 加载完成后处理,我们把require.config的配置加入到data-main后,就可以使每一个页面都使用这个配置,然后页面中就可以直接使用require来加载所有的短模块名。
define 用来定义一个模块
define(function( ){
// ...
});
define(['依赖的模块路径'], function(依赖模块名称){
// ...
return {
// ...
};
});