9.14-9.18随笔之一(CSS扩展技术:LESS SASS)

less css是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性;SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状、混入、选择子继承等功能,可以更有效有弹性的写出Stylesheet。

less是一种语法,使用需要编译器将其编为CSS才能使用,通过less 我们可以在编写css时设置变量(@变量名)、运用继承、嵌套等,更方便CSS的编写和维护,
我最为喜欢的便是这两种技术中可嵌套的编写方法,对于初学者来说尤为实用,在less中变量作用域类似JS;同作用范围下先声明所有变量再执行;就近按需加载。

相比于less,sass在包含less所有的功能(定义变量:$变量名)外技术的功能更为强大,sass的文件后缀名分为两种1、sass(以前的写法,现不怎么使用) 2、scss(目前使用);在sass中可以导入文件,格式为:@import "test"(如果导入test的是sass文件不需要后缀名,否则反之);在sass中最为强大的功能便是判断与循环:

1、判断: $ie:true;$type:d;div{@if $ie{zoom:1;}@else{overflow:hidden;}@if $type==a{color:blue;}@else{color:red;}}

2循环:@for $i from 1 through 6{      //定义一个变量i 从1到6循环;through会包含后面的6;to不会

      h#{$i}{        //h1 h2 h3...h6 字体大小分别为13 14  15...18
        font-size:12px+$i;
      }
    }

  由于刚学习这两种扩展技术,还在熟悉中,未了解透彻,个人对这两种技术的认知还不到位。

转载于:https://www.cnblogs.com/webhtmlcss/p/4823845.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值