Sass

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源
 
//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 : {
        "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 {
  // ...
 };
});
 
 
 
posted @ 2019-07-01 11:27  前端小菜鸟吖  阅读(389)  评论(0编辑  收藏  举报