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

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

时间: 2024-10-19 17:21:24

9.14-9.18随笔之一(CSS扩展技术:LESS SASS)的相关文章

CSS扩展“less"和”sass“

css扩展技术是对css原生代码一种扩展,其中less和sass就是css扩展技术两种方式,通过扩展技术,可以使我们在写css代码时候,更加的方便和快捷. 首先要了解css扩展技术的含义:扩展技术并不是另外一种全新的技术,它是建立在css基础上进行扩展,实现一些css原生代码所不能实现的功能,其次less和sass不能单独在浏览器上运行,需要进行编译: less能实现同js一样的变量.函数.混合参数等功能,通常用@标志开始,后面接变量名字,具体如实例:@winth.@color.@height等

CSS扩展技术-less

在原来的CSS基础上扩展一些编程语言 CSS引用扩展技术时需要编译器编译<编译工具Koala 1.less<比较早期的CSS扩展技术> a.less语法:后缀名<.less> //变量的定义 @color:blue; @body-color:blue; @div-color:blue; @w:100px; @h:100px; body{ height:500px; border:1px solid @body-color; } div{ width:@w; height:@h

CSS 扩展技术

CSS扩展技术有两种: 1:LESS 2:SCSS/SASS less作为CSS的一种扩展,LESSCSS不仅向下兼容CSS的语法,而且连新增的特性也是使用CSS的语法.这样的设计使得学习LESS很轻松,而且你可以在任何时候回退到CSS. 申明变量的方法: @width:100px; @backgroundColor:blue; 其变量是“按需加载”(lazy loaded)的,因此不必强制在使用之前声明. 在 LESS 中可以定义一些通用的属性集为一个 class,然后在另一个 class 中

css扩展技术

在原来的基础上扩展了编程语言的特性. less(早期):定义变量[email protected]&-当前对象,如:.class1{ .whb(100px,100px,red); &:hover() }sass(现在很多都用sass):需安装Ruby环境(可以先用kola代替).导入sass不需要后缀名,css需要后缀名(@import "test2";)语法规则:1.定义变量-$(以前只有全局变量没有局部变量) 2.!default 默认值(组建化开发特别有用) 3.

css扩展技术:Less和Sass的区别

这个周学习了Less和Sass这两个css框架,我基本了解了它们各自的语法和特性,并通过两个html网页设计的练习,感受一下它们给我们开发者在进行css网页布局过程中带来的便利.下面是我对它们之间的区别的一些总结. Less和Sass的相同之处: 1.变量:可以单独定义一系列通用的样式,在需要的时候进行调用. 2.混合(Mixins):class中的class(讲一个class引入到另一个class,实现class与class之间的继承),还可以带参数的混合,就像函数一样. 3.嵌套:class

css的扩展技术

CSS的扩展技术 (在原来的CSS语言的基础上扩展了js,可以在里面写js ) 一.less 定义: @color:red; //定义颜色 @body-color:blue; @div-color:yellow; 引用: body{ height:500px; border:1px solid @body-color; //调用了上面的颜色 } 嵌套: div{ height:500px; border:1px solid @div-color;//这里就直接调用了上面的颜色 p{ color:

强悍的 CSS 扩展语言 -- Sass

<div class = 'testBorder'> <p> <input/> </p> </div> 假设上面这 3 个 DOM 元素有这样的需求, div 去边框, p 显示边框, input 只显示底部边框, 而且统一用 !important 关键字提高样式的优先权: 如果手写纯 CSS 会是这样: .testBorder{ border:none !important; } .testBorder p{ border:1px solid

CSS预编译器:Sass(入门),更快的前端开发

Sass 扩展了 CSS3,增加了规则.变量.混入.选择器.继承等等特性.Sass 生成良好格式化的 CSS 代码,易于组织和维护. SASS是对CSS3(层叠样式表)的语法的一种扩充,它可以使用巢状.混入.选择子继承等功能,可以更有效有弹性的写出Stylesheet.Sass最后还是会编译出合法的CSS让浏览可以使用,也就是说它本身的语法并不太容易让浏览器识别(虽然它和CSS的语法非常的像,几乎一样),因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言

CSS预编译器:Sass(进阶),更快的前端开发

1.@if @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还可以配合 @else if 和 @else 一起使用. 假设要控制一个元素隐藏或显示,我们就可以定义一个混合宏,通过 @[email protected] 来判断传进参数的值来控制 display 的值 [email protected]循环 在制作网格系统的时候,大家应该对 .col1~.col12 这样