CSS进阶之SASS入门指南#

        随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说,上手SASS。

一、安装与配置##

  1. 安装Ruby

    由于sass是紧密依赖于ruby语言实现在服务器端编译过程的,所以必须先安装好ruby。对于windows用户来说,需要手动下载安装[官网:https://www.ruby-lang.org/en/downloads/]

  2. 安装SASS

    点击运行ruby的dos窗口程序,输入行命令:gem install sass

    Linux用户:sudo gem install sass

二、编译运行##

  1. 查看sass文件转化成css内容:sass example.scss

  2. scss文件编译城css文件:sass example.scss example.css

三、SASS语法##

1.变量###

SASS允许使用变量,所有变量以$开头,如果变量需要嵌套在字符串之中,就必须需要写在之中(Eg3)

    基本使用#####
    //Eg1:变量的基本使用
$tmp_color:red;
#t { color: $tmp_color; }
    //Eg1:编译结果:
#t { color: red; }

    错误实例#####
    //Eg2:错误实例
$mystyle-text-left:text-align:left 【X】

    组合嵌套变量与值######

通常情况下,一些数字,样式的颜色值,方向之定义为变量的形式,在样式中调用即可。

    //Eg3:放置在字符中需要加#{}符号
//注意:scss文件中的注释中不可以出现#{},否则依照目前的sass语法规则,将可能出现编译失败
$side:5;
$common_width:200;
.border {
width:#{$common_width}px;//#{}
border: solid 1px red;
border-radius:#{$side}px;
padding:#{$side}px;
}
    //Eg3:编译结果:
.border {
width: 200px;
border: solid 1px red;
border-radius: 5px;
padding: 5px;
}

2.计算##

SASS允许在代码中使用算式,可以是两个数值运算,也可以是变量间的求值。(Eg4)

    计算######
    //Eg4:计算
$num1:5;
.border2 {
margin: (14px/2); //值与值乘商
top: 50px+100px; //值与值加减
right: $num1*2px; //变量与值乘商
bottom:#{$num1+$num1}px; //变量与变量加减
}
    //Eg4:编译结果:
.border2 {
margin: 7px;
top: 150px;
right: 10px;
bottom: 10px;
}

3.【复用:mixin/include;extend】##

复用功能之一(继承):SASS允许一个选择器,继承另一个选择器。

复用功能之二(Mixin):SASS中可以定义一个Mixin,它的功能有点想C语言的宏,它是可以重用的代码块。

【说明】可以在定义时,设置参数或者不设置,调用这个块时,直接使用艾特include命令

    继承(@extend)######
    //Eg5:extend继承
//比如,现有名为a1的类别,a2要继承a1,则使用下列命令:
$num:10;
.a1 {
color: blue;
} .a2 {
@extend .a1;
font-size: $num+px;
}
    //Eg5:编译效果:
.a1, .a2 {
color: blue;
} .a2 {
font-size: 10px;
}

    Minxin######
    //Eg6:mixin继承
@mixin bandf($boder_size, $font_size) {
border: solid $boder_size+px red;
font-size: $font_size+px;
} .a3 {
@include bandf(2, 13);
}
    //Eg6:编译结果:
.a3 {
border: solid 2px red;
font-size: 13px;
}

4.条件语句###

在SASS中,可以使用 艾特if 或 艾特if-else 或 艾特 if-else if 来进行条件的判断

    条件语句######
    //Eg7:条件语句
$num:8;
.a4 {
@if $num==5 {
color: blue;
}
@else if($num==4) {
color: red;
}
@else {
color: yellow;
}
}
    //Eg7:编译结果:
.a4 {
color: yellow;
}

5.循环语句###

在SASS中,可以使用 艾特for 或者 艾特while、艾特each来进行循环的操作

    循环语句######

//Eg8:循环语句
@for $i from 1 to 10 {
.a5_img#{$i} {
background-image: url('images/img#{$i}.png');
}
} $j:9;
@while $j>0 {
.a5_img#{$j} {
background-image:url('images/img#{$j}.png');
}
$j:$j - 1;
} @each $item in 1,2,3,4 {
.a7_img#{$item} {
background-image:url('images/img#{$item}.png');
}
}
    //Eg8:编译结果:
.a5_img1 { background-image: url("images/img1.png"); }
.a5_img2 { background-image: url("images/img2.png"); }
.a5_img3 { background-image: url("images/img3.png"); }
.a5_img4 { background-image: url("images/img4.png"); }
.a5_img5 { background-image: url("images/img5.png"); }
.a5_img6 { background-image: url("images/img6.png"); }
.a5_img7 { background-image: url("images/img7.png"); }
.a5_img8 { background-image: url("images/img8.png"); }
.a5_img9 { background-image: url("images/img9.png"); }
.a5_img10 { background-image: url("images/img10.png"); }

6.自定义函数###

在SASS中,可以允许用户使用 艾特function 命令去编写自己的函数

【说明】使用 艾特function +函数名称,每个函数都需要有返回值的内容

    //Eg9:自定义函数
@function du($r){
@return $r*2;
} .a8{
border:solid #{du(2)}px red;
}
    //Eg9:编译结果:
.a8 {
border: solid 4px red;
}

参考文献##

CSS进阶之SASS入门指南的更多相关文章

  1. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  2. CSS预处理器之SASS用法指南

    CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...

  3. Sass入门指南

    转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...

  4. 【学习笔记】Sass入门指南

    本文将介绍Sass的一些基本概念,比如说“变量”.“混合参数”.“嵌套”和“选择器继承”等.著作权归作者所有. 什么是Sass? Sass是一门非常优秀的CSS预处语言,他是由Hampton Catl ...

  5. (12/24) css进阶:sass文件的打包和分离

    1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass ...

  6. (14/24) css进阶:(入门)去除冗余的css

    在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式 ...

  7. webpack快速入门——CSS进阶:自动处理CSS3前缀

    为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...

  8. webpack快速入门——CSS进阶,Less文件的打包和分离

    1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

  9. webpack快速入门——CSS进阶:消除未使用的CSS

    使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...

随机推荐

  1. DTD举例一

    DTD举例一: <!--动作库约束文件--> <!DOCTYPE actionGroup [ <!ELEMENT actionGroup (action*)> <! ...

  2. Django-website 程序案例系列-3 URL详解

    django参考资料:http://docs.30c.org/djangobook2/index.html urls.py是django中控制接收前端的参数指定函数去执行逻辑 第一种 函数的方式 ur ...

  3. BZOJ5093 图的价值(NTT+斯特林数)

    显然每个点会提供相同的贡献.于是现在只考虑1号点的贡献.若其度数为i,则在2~n号点选i个连上,剩下的边随便连,这样可以算出答案为 这个式子可以O(n)计算.发现k比较小,于是考虑如何将这个式子化为与 ...

  4. JavaScript——根据数组中的某个值进行排序

    我这里是根据次数进行倒叙,可根据自己情况进行修改 function sortKey(array,key){ return array.sort(function(a,b){ var x = a[key ...

  5. Maven依赖中的scope详解

    scope的分类 compile 默认就是compile,什么都不配置也就是意味着compile.compile表示被依赖项目需要参与当前项目的编译,当然后续的测试,运行周期也参与其中,是一个比较强的 ...

  6. 自学Linux Shell13.2-选项处理(主要getopt、getopts命令)

    点击返回 自学Linux命令行与Shell脚本之路 Bash shell提供了一些不同的方法来从用户处获得数据,包括以下3中方法: 命令行参数(添加在名利后面的数据) 命令行选项(可修改命令行为的单个 ...

  7. 【转】安全加密(三):RFID标签防伪为生活开启安全模式

    本文导读 随着RFID技术的快速发展和RFID电子标签的生产成本不断降低,RFID标签防伪技术的应用也得到了极大的普及,逐步出现在各行各业当中,如交通出行.票务安全.商品防伪等领域. RFID技术简介 ...

  8. Python--Django学习笔记2

    本篇介绍Django中的Model层. 首先介绍sqlite3,这是在当前版本中Django默认使用的数据库,sqlite也是Android中所使用的数据库. 接着介绍最最最常见的MySQL数据库如何 ...

  9. Spring实现文件的上传下载

    背景:之前一直做的是数据库的增删改查工作,对于文件的上传下载比较排斥,今天研究了下具体的实现,发现其实是很简单.此处不仅要实现单文件的上传,还要实现多文件的上传. 单文件的下载知道了,多文件的下载呢? ...

  10. word公式的使用

    插入->公式->插入新公式 优点:可以表示一些特殊符号,而且word公式的字更好看. 方法: 1.Shift+Enter,公式转入下一行 2.选择内嵌或显示 3.选择性粘贴->粘贴成 ...