CSS预处理框架:less,scss
CSS预处理器:less和sass:CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用 变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更 见简洁,适应性更强,代码更直观等诸多好处。
less框架的应用:
less一门标记性语言,HTML文件还是链接生成的css文件
注释:
单行注释://编译后不会出现在同名的css文件中
多行注释:/* */编译后会出现在同名的css文件中
1.新建less文件
2.在编辑器中编译,会看见自动生成一个同名的css文件
变量:
less文件中
@border—color(@变量名):white(变量值)
table(选择器){
border(属性):1px solid @border-color
}
less中的变量和其他编程语言一样,可以实现值的复用,而且也有生命周期,也就是变量范围,简单讲就是局部变量还是
全局变量的概念,查找变量的顺序是先在局部定义中找,如果找不到,则查找上级定义,直至全局。
Mixins(混入)
它是多重继承的一种实现,在less中,混入是指在一个class中引入另外一个已经定义的class,就像在当前class中增加
一个属性一样。文本样式会被继承
.border{border:solid 5px black} //声明一个样式
.box{width:100px;height:100px;.border}
Sass框架的应用:
Sass,是以.sass为扩展名,语法是缩进式,没有分号,大括号,不方便使用,之后改良为Scss
Scss是Sass以.scss为扩展名,是Sass的改进:
Scss语法:
变量:
用$+变量名
编译后会出现一个map结尾的文件,没用,同时生成一个同名的css文件,HTML中同样链接css文件默认变量和普通变量:默认后在值的后面有!default
混合宏:当单独的属性需要统一处理,
@mixin是用来声明混合宏的关键字,@include调用混合宏@mixin 变量名{}
@include 变量名
带参就在变量名后面加()
@extend 关键词用来继承已存在的类样式快
%placeholder占位符,当调用的时候才在css文件中出现,不调用时在css中不会出现 声明:%变量名{。。。},而基类 .
变量名{}一旦编译,一直都存在css文件中
总结:
什么时候该用混合宏@mixin、什么时候该用继承@extend、什么时候该用占位符%呢?
混合宏的使用:它不会自动合并相同的样式代码,如果在样式文件中调用同一个混合宏,会产生多个对应的样式代码,造成代码的冗余。不过他并不是一无事处,他可以传参数。如果你的代码块中涉及到变量,建议使用混合宏来创建相同的代码块。
继承:使用继承后,编译出来的 CSS 会将使用继承的代码块合并到一起,通过组合选择器的方式展现,这样编译出来的代码相对于混合宏来说要干净易读。但是它不能传变量参数。如果你的代码块不需要传任何变量参数,而且有一个基类已在文件中存在,那么建议使用继承。
less:
//单行注释,你猜我会不会被编译
/*多行注释,你猜我会不会被编译*/
@yhColor:green;
@yhWidth:100px;
@yhHeight:200px;
.yhRad{
border-radius: 10px;
}
//括号里叫做参数
.yhRad2(@canshu){
border-radius: @canshu;
}
.p1,.p2,.p3,.p4{
color: @yhColor;
}
.box1{
width: @yhWidth;
height: @yhWidth;
//.yhRad;
.yhRad2(10px);
background: @yhColor;
}
//嵌套写法,嵌套规则与HTML相同
// &代表上一层选择器
a {
color: red;
text-decoration: none;
&:hover {
color: black;
text-decoration: underline;
}
}
.box2{
width: @yhHeight + 50;
height: @yhHeight;
background: red;
}
-------------------------------------------------------
scss:
$yhColor:red;
@mixin yhBr{
border-radius: 10px;
}
@mixin yhBr2($wanwan){
border-radius: $wanwan;
}
.moren{
outline: none;
padding: 5px 10px;
}
%beitai{
font-family: "Microsoft Yahei";
}
.p1{
color: $yhColor;
}
.box1{
border:{
top:2px solid #ccc;
right: 2px dashed #58a;
bottom: 6px double #faa;
left: 2px dotted pink;
}
}
.box2{
width: 200px;
height: 200px;
@include yhBr;
}
.box3{
width: 100px;
height: 100px;
@include yhBr2(50%);
}
.btn1{
@extend .moren;
background: #fff;
color: #000;
}
.btn2{
@extend .moren;
font-size: 30px;
@extend %beitai;
}
CSS预处理框架:less,scss的更多相关文章
- CSS 预处理语言之 Scss 篇
简介 1. Sass 和 Scss Sass 和 Scss 其实是同一种东西,我们平时都称之为 Sass:Scss 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强 ...
- css预处理scss环境配置
css 预处理器 CSS 预处理器用一种专门的编程语言,进行 Web css编码,然后再编译成正常的 CSS 文件,以供项目使用:说简单点就是在某个环境下写css 可以写变量.表达式.嵌套等,在通过该 ...
- CSS预处理器之less和sass
CSS预处理器 1. 基于CSS的另一种语言 2. 通过工具编译成CSS 3. 添加了很多CSS不具备的特性 4. 能提升CSS文件的组织方式 ...
- 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)
一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- CSS预处理器之SASS用法指南
CSS预处理器之SASS用法指南 一.什么是SASS Sass是是一种基于ruby编写的CSS预处理器,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护. 诞生于200 ...
- css预处理语言--让你的css编写更加简单方便
CSS预处理语言之一-------LESS Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. Less 可以运行在 Nod ...
- Less:Less(CSS预处理语言)
ylbtech-Less:Less(CSS预处理语言) Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题 ...
- 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
随机推荐
- CGAffineTransform
这个是CoreGraphics框架中的CGAffineTransform类,可用于设定UIView的transform属性.控制视图的缩放.旋转和平移操作.另称仿射变换矩阵. Quartz转换实现原理 ...
- ABAP 订单-交货单-发货过账自动完成 案例
*&---------------------------------------------------------------------* *& Report ZSDR006 ...
- js三级地区联动
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head ...
- 创建/发布cocoapods公共库
对于大多数iOS开发者而言,cocoapods都是一个非常便捷的第三方库引导工具,该工具可以帮助我们快速导入所需第三方库,并且进行相关配置. 本文即为描述如何发布一个第三方库,提供给所有的开发者使用. ...
- GroupJoin和Join的声明及调用
public static IEnumerable<TResult> Join<TOuter, TInner, TKey, TResult>(this IEnumerable& ...
- 修改linux文件权限
Linux系统中的每个文件和目录都有访问许可权限,用它来确定谁可以通过何种方式对文件和目录进行访问和操作. 文件或目录的访问权限分为只读,只写和可执行三种.以文件为例,只读权限表示只允许读其内容,而禁 ...
- 【转】理解 PHP 依赖注入 | Laravel IoC容器
Laravel框架的依赖注入确实很强大,并且通过容器实现依赖注入可以有选择性的加载需要的服务,减少初始化框架的开销,下面是我在网上看到的一个帖子,写的很好拿来与大家分享,文章从开始按照传统的类设计数据 ...
- Android中surface,surfaceview,sufaceholder以及surface客户端的关系
这里以照相机camera功能的实现来解释surface,surfaceview,sufaceholder以及surface客户端(本例子中指的是camera)的关系,surface及其client(客 ...
- Scrapy 爬虫 使用指南 完全教程
scrapy note command 全局命令: startproject :在 project_name 文件夹下创建一个名为 project_name 的Scrapy项目. scrapy sta ...
- 指令<AngularJs>
对于指令,可以把它简单的理解成在特定DOM元素上运行的函数,指令可以扩展这个元素的功能. 首先来看个完整的参数示例再来详细的介绍各个参数的作用及用法: angular.module('myApp', ...