千锋教育-做有情怀、有良心、有品质的IT职业教育机构

400-811-9990
当前位置:千锋视频教程 > html5视频教程  >  HTML5学习之对SASS工具的应用

HTML5学习之对SASS工具的应用

时间:2018-04-24 10:47:41     来源:千锋视频教程 作者:杨

  对于大部分前端程序员来说,最痛苦的是莫过于写样式(css)了,试想一下,当做了 一个炫酷插件,或者实现了多牛逼的功能,可是没有完美样式,是不被人宠幸的,巨了解,我身边绝大部分的人都及其不喜欢写样式,一方面:嵌套多层元素时,那选择器的写法可不建议简写,毕竟涉及到样式覆盖与权重的问题;第二方面:对于某些程序员来说这与体力活不差一二。可是在我看来,一个优秀的,吸引人的web,样式的成分还是还是处于上游的,试想一下,一个web,没有“华丽”的表面,怎么吸引人的注意?我始终相信这样一句话“天无绝程序员之路”,这时候sass就拯救了我们

  何为SASS

  SASS是一个成熟、稳定、强大的 CSS 扩展语言解析器,提供变量、嵌套、混合、继承等特性,使用起来可以有效节俭时间,效率更高,维护更便利

  sass安装的两种不同方法

  gulp-ruby-sass是调用sass,所以需要ruby环境,需要生成临时目录和临时文件。

  gulp-sass是调用node-sass,有node.js环境就够了,编译过程不需要临时目录和文件,直接通过buffer内容转换。

  1,这里我主要介绍第二种方法首先需要在node环境下安装gulp插件

  (gulp是当下最流行的自动化工具,可以自动化完成我们开发过程中大量的重复工作)

  2,假设安装好gulp后,就可以安装sass(npm install gulp-sass --save-dev)

  3,这里需要新建gulpfile.js文件(这是gu lp的配置文件,放在项目根目录)

SASS的理解-1

  4,接下来就可以写我们的sass了

  注释(与js相同)

  单行注释 //单行注释不会存在css文件

  多行注释 /*多行注释会存在css文件中*/

  变量

  1, sass的变量名必须使$开头,后面接变量名(如 $color:#58bc58);好处不言而喻,相同属性可以直接使用变量名(如 color:$color / background-color:$color)

  2,当然说到变量肯定少不了全局变量,局部变量

  (写在选择器外的称全局变量,选择器外称局部变量,如果希望局部变量能覆盖全局变量,只需加上

  (!glogal)=>$color:#red !global )

  3,引用外部文件的变量,同名变量需要覆盖只需讲要覆盖的变量后加 !default =>$color:pink; !default

  4,多值变量(list类型=>可以理解成js中的数组,map类型=>可以理解为js中的对象)

  list : $pd : 5px 10px 15px 20px;=> div{ padding : $pd ;} span{ border : nth( $pd , 2 ) ;}

  map : $head : ( h1 : 24px , h2 : 18px , h3 : 16px ); => h1{ map-get( $head , h1) ;}

  嵌套(重要)

  这个就很重要了,css中写重复的东西是非常恼火的,假设父元素里面有多个子元素,则父元素的id就要重复好多次了

  如:#content .nav{background:$color}

  #content .nav p { color : red };

  #content span { border-top : ($pd,2) }

  sass写法

SASS的理解-2

  有了嵌套后就大大的提升开发者的效率了(在嵌套中用&表示父元素选择器)

  继承(@extend)

  (顾名思义就是继承同种样式,使用简单,使代码变得简洁)

  1,继承一般样式 @extend h1

  2,站位选择器 % (编译后,符号不存在css中),在我看来继承跟变量的是使用某方面还是一方的

SASS的理解-3

  函数(针对数字方面提供一系列函数功能)

  常用函数

  · percentage($value):将一个不带单位的数转换成百分比值;

  · round($value):将数值四舍五入,转换成一个最接近的整数;

  · ceil($value):将大于自己的小数转换成下一位整数;

  · floor($value):将一个数去除他的小数部分;

  · abs($value):返回一个数的绝对值;

  · min($numbers…):找出几个数值之间的最小值;

  · max($numbers…):找出几个数值之间的最大值。

  · lighten($color,$percent) $color颜色值,$percent百分比

  · darken($color,$num) $num:0-100

  自定义函数(@function函数名)

SASS的理解-4

  运算

  sass具有运算的特性,可以对数值型的Value(如:数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格,不然会出错。

  循环(重要)

SASS的理解-5

  像以上案例,循环就可以给4个li加上不同的背景图片,有效的减少了代码的复写

  导入(@import)

  1,假设一个web,不同的页面存在重复样式有很多的时候,我们可以将其提取出来,存放在公共的sass文件中(如test.sass),(包括需要继承的样式等),@import 'test' ;

  2,大部分web中,header,footer内容都一样,就可以同导入的方式完成了

  • 北京天丰利校区(总部):北京市海淀区宝盛北里西区28号天丰利商城4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼2层、南区服务楼2层
    咨询电话:400-186-9990 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、大数据开发培训、VR/AR混合
    现实培训、Python培训、Linux云计算培训、软件测试培训、Android培训、iOS培训、好程序员
  • 深圳西部硅谷校区地址:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619
    深圳大学城校区地址:深圳市南山区留仙大道1201号大学城创客小镇16栋2楼、3楼
    咨询电话:0755-33582485-801(硅谷校区)0755-86660670-801(大学城校区)
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android培训、iOS培训
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-627-7899 021-56166283/56166279
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训、好程序员
  • 郑州校区地址:郑州市金水区纬五路21号河南教育学院综合楼(经纬中学楼)7/8层
    咨询电话:0371-55191750 400-186-9990
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 广州校区地址:广州市天河区元岗路310号智汇park创意园E座5层
    咨询电话:020-22119207 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 大连校区地址:辽宁省大连市甘井子区软件园路2号东软信息学院B5座一楼
    咨询电话:0411-39026086 400-186-9990
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、UI交互设计培训、Android课程培训、iOS课程培训
  • 武汉校区地址:武汉市光谷大道61号智慧园21号楼2层
    咨询电话:027-65523826
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 成都校区地址:成都市武侯区科华北路62号力宝大厦N(北楼)18楼
    咨询电话:028-83178771
    面授课程:全栈HTML5+培训、UI交互设计培训、PHP培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:029-85260160
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训
  • 杭州校区地址:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:0571-86893632 010-82790226-801
    面授课程:全栈HTML5+培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 青岛校区地址:青岛市市南区金坛路17号青岛职业技术学院南校区实训楼A4层
    咨询电话:0532-80910752/3 010-82790226-801
    面授课程:全栈HTML5+培训、UI交互设计培训、JavaEE+云数据培训、Android课程培训、iOS课程培训
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:023-68883009
    面授课程:JavaEE+云数据课程培训
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:0731-85513010/85513210
    面授课程:JavaEE+云数据课程培训
  • 哈尔滨校区地址:哈尔滨市松北区创新一路699号科技创新城19号楼五楼
    咨询电话:15663846969
    面授课程:全栈HTML5+培训
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱