CSS进阶之SASS入门指南
CSS进阶之SASS入门指南#
随着跟着公司学习项目的前端的推进,越来越对好奇了许久的SASS垂涎欲滴,哈哈,可能这个词使用不当,没有关系,就是对SASS有一股神秘的爱!好了,闲话不多说,上手SASS。
一、安装与配置##
安装Ruby
由于sass是紧密依赖于ruby语言实现在服务器端编译过程的,所以必须先安装好ruby。对于windows用户来说,需要手动下载安装[官网:https://www.ruby-lang.org/en/downloads/]
安装SASS
点击运行ruby的dos窗口程序,输入行命令:gem install sass
Linux用户:sudo gem install sass
二、编译运行##
查看sass文件转化成css内容:sass example.scss
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入门指南的更多相关文章
- webpack快速入门——CSS进阶:SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- Sass入门指南
转自:http://www.imooc.com/article/1413 css预处理器已经算不上一个新鲜的词了,当前比较有代表性的css预处理器有sass.less.stylus.关于三者选择问题一 ...
- 【学习笔记】Sass入门指南
本文将介绍Sass的一些基本概念,比如说“变量”.“混合参数”.“嵌套”和“选择器继承”等.著作权归作者所有. 什么是Sass? Sass是一门非常优秀的CSS预处语言,他是由Hampton Catl ...
- (12/24) css进阶:sass文件的打包和分离
1.安装sass打包的loader 这里需要 在项目目录下用npm安装两个包.node-sass和sass-loader,(也可以使用cnpm安装) 因为sass-loader依赖于node-sass ...
- (14/24) css进阶:(入门)去除冗余的css
在平时的项目开发中,我们会引入一些框架,比如:Bootstrap,但是在项目中通常我们只使用它的一小部分,还有部分是冗余的.更有甚有时候需求更改,带来DOM结构的更改,这时候我们可能无暇关注CSS样式 ...
- webpack快速入门——CSS进阶:自动处理CSS3前缀
为了浏览器的兼容性,有时候我们必须加入-webkit,-ms,-o,-moz这些前缀.目的就是让我们写的页面在每个浏览器中都可以顺利运行. 1.安装 cnpm i postcss-loader aut ...
- webpack快速入门——CSS进阶,Less文件的打包和分离
1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...
- webpack快速入门——CSS进阶:消除未使用的CSS
使用PurifyCSS可以大大减少CSS冗余 1.安装 cnpm i purifycss-webpack purify-css --save-dev 2.引入glob,因为我们需要同步检查html模板 ...
随机推荐
- Essential Phone PH1官方刷机方法
Essential Phone官方有两种包 一种是ota包,即sideload线刷使用的包.但此刷机方法只能ota升级,不能降级. 另一种是Images包,即fastboot线刷使用的包.这种方法可以 ...
- CUDA ---- Warp解析
Warp 逻辑上,所有thread是并行的,但是,从硬件的角度来说,实际上并不是所有的thread能够在同一时刻执行,接下来我们将解释有关warp的一些本质. Warps and Thread Blo ...
- oftype 指的是集合的类型
- 学习笔记特别篇之orm的跨表
models.Love.objects.filter(b__name="t1",g__nams="a1") 表示先inner join b on xx 再 in ...
- Mvc 前台 匿名对象
View无法使用 dynamic 报错: object 未包含....的属性 这里需要区别一下:如果dynamic只是简单模型,那么还是可以使用的.例如 dynamic v = new Expando ...
- day29 类中的内置函数方法 __str__ __repr__ __call__ isinstance() issubclass()
__str__()__repr__()__len__() str() 转字符串repr() 让字符原形毕露的方法len() 计算长度 内置的方法很多,但是并不是全部都在object中,比如len(), ...
- Threed.sleep是不会释放锁,而wait是释放锁的(对象锁)
实战分析 一直都说,Threed.sleep是不会释放锁,而wait是释放锁的(对象锁),现理论上来分析一下啊. v package thread.concurrent; public class D ...
- hdu 2577 How to Type(dp)
Problem Description Pirates have finished developing the typing software. He called Cathy to test hi ...
- Azure HDInsight 上的 Spark 群集配合自定义的Python来分析网站日志
一.前言:本文是个实践博客,演示如何结合使用自定义库和 HDInsight 上的 Spark 来分析日志数据. 我们使用的自定义库是一个名为 iislogparser.py的 Python 库. 每步 ...
- RMQ求解->ST表
ST表 这是一种神奇的数据结构,用nlogn的空间与nlongn的预处理得出O(1)的区间最大最小值(无修) 那么来看看这个核心数组:ST[][] ST[i][j]表示从i到i+(1<<j ...