• 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;
          }
        }

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

  • 相关阅读:
    GO 文档笔记
    GO 切片实力踩坑
    关于接口设计的一些反思
    Jenkins 发布.net core 程序,服务端无法下载nuget包的解决方法 error NU1102: 找不到版本为 (>= 3.1.6) 的包
    RabbitMQ 基础概念进阶
    RabbitMQ 入门之基础概念
    Object.entries()使用
    shadow的属性值介绍
    行内元素的特别之处
    margin的特别之处
  • 原文地址:https://www.cnblogs.com/webhtmlcss/p/4823845.html
Copyright © 2020-2023  润新知