Less与Sass
less
1、变量
声明变量:@变量名:变量值
使用变量:@变量名
>>>Less中变量的类型
①数字类:1 100px
②字符串:无引号字符串[red] 有引号字符串["haha"]
③颜色类:red #000000 rgb()
④值列表类型:用逗号或空格分隔10px solid blue
>>>变量使用原则:
多次频繁出现的值、需要修改的值,设为变量
2、混合(MiXins)
①无参混合
声明:.name{} 选择器中调用:.name;
②带参混合
无默认值声明:.name(@brWidth){} 调用 .name(parValue);
有默认值声明:.name(@brWidth:value){} 调用 .name(parValue);parValue可省略
>>>如果声明时,参数没有默认值,则调用时必须赋值,否则报错!
>>>无参混合,会在css中编译出同名的class选择器:有参的不会;
3、Less的匹配模式
使用混合进行匹配,类似于if结构
>>>声明 .name(条件一,参数){} .name(条件二,参数){} .name(@_,参数){}
>>>调用 .name(条件值,参数值);
>>>匹配规则:根据调用时提供的条件值,去寻找与之匹配的"mixins"执行。其中@_表示永远匹配
4、less中的运算
+ - * /
颜色运算时,红绿蓝分开计算,组内可进位,组间互不干扰
Sass
1、Sass中的变量
声明变量:$变量名:变量值
如果变量需要在字符串中嵌套,则需要使用# {}包裹
border-# {$left}:10px solid red;
2、Sass中的运算
会将单位也进行运算,使用时注意最终单位;
3、sass中的嵌套:选择器嵌套,属性嵌套,伪类嵌套
选择器嵌套
ul{ li{} }后代
ul{>li{} }子代
&表示上一层div{ul{li{&=="div ul li"}}}
属性嵌套:
属性名与{之间必须有:例如border:{color:red;}
伪类嵌套:
ul{li{&:hover{"ul li:hover"}}}
4、混合宏、继承、占位符
①混合宏: 声明:@mixin name($param:value){}
调用@include name(value);
>>>声明时,可以有参数,也可以无参;可带默认值,也可以不带;但是调用时,必须符合声明规范。同Less
>>>优点:可以传参,不会生成同名class
>>>缺点:会将混合宏中的代码,copy到对应的选择器中,产生冗余代码
②继承:声明: .class{} 调用 @extend .class;
>>>优点:继承相同代码,会提取出并集选择器中,减少冗余代码;
>>>缺点:无法进行传参、会在css中生成一个同名class
③占位符:声明: %class{} 调用: @extend %class;
>>>优点:继承相同代码,会提取出并集选择器中,减少冗余代码;不会在css中生成一个同名class
>>>缺点:无法进行传参
>>>综上所述:当需要传递参数的时候,用混合宏;当有现成class时用继承;
当不需要参数,且无现成class时用占位符;
5、if条件结构
6、for循环结构
7、while 循环结构
8、each循环遍历
9、函数function
Less与Sass的更多相关文章
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- SASS教程sass超详细教程
SASS安装及使用(sass教程.详细教程) 采用SASS开发CSS,可以提高开发效率. SASS建立在Ruby的基础之上,所以得先安装Ruby. Ruby的安装: 安装 rubyinstaller- ...
- Sass之坑Compass编译报错
前段时间在使用Compass时遇到了其为难处理的一个坑,现记录到博客希望能帮助到各位. 一.问题: 利用Koala或者是gulp编译提示如下,截图为koala编译提示错误: 二.解决办法 从问题截图上 ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass用法指南
写在前面的话:随着CSS文件越来越大,内容越来越复杂,对其进行很好的维护将变的很困难.这时CSS预处理器就能够帮上大忙了,它们往往拥有变量.嵌套.继承等许多CSS不具备的特性.有很多CSS预处理器,这 ...
- PostCSS深入学习: PostCSS和Sass、Stylus或LESS一起使用
如果你喜欢使用PostCSS,但又不想抛弃你最喜欢的预处理器.不用担心,你不需要作出二选一的选择,你可以把PostCSS和预处理器(Sass.Stylus或LESS)结合起来使用. 有几个PostCS ...
- Sass:初识Sass与Koala工具的使用
一.下载Koala(找到合适的系统版本)并安装 二.先新建一个css文件夹,并在里面新建一个文本文档(.txt),将其命名为demo.scss 三.打开Koala,将css文件夹拽进来,可以修改一下输 ...
随机推荐
- http的几种请求的方式(Get、Post、Put、Head、Delete、Options、Trace和Connect)
http的这几种请求方式各有各的特点,适用于各自的环境.下面我就说说这些方式的各自特点: 1.Get:它的原理就是通过发送一个请求来取得服务器上的某一资源.获取到的资源是通过一组HTTP头和呈现数据来 ...
- 一个小时学会jQuery
前一段时间录了一套关于jQuery的视频分享给大家,可以在下载区下载到,本来想配合文字一起的,后面发现视频+帮助文档也是非常好的学习方法. 一.jQuery简介与第一个jQuery程序 1.1.jQu ...
- Android 事件统计
title: Android 事件统计 1.写在前面的话 最近都在看framework的东西,也几天没有写什么东西,今天有点时间写下上次面试遇到的一个问题.问题大概是这样的,如果我需要统计页面的点击事 ...
- Tomcat+Eclipse乱码问题解决方法
概述 乱码问题是大家在日常开发过程中经常会遇到的问题,由于各自环境的不同,解决起来也费时费力,本文主要介绍一般性乱码问题的解决方法与步骤,开发工具采用Eclipse+Tomcat,统一设置项目编码UT ...
- Android-自定义控件之时针-霞辉
注释已经比较详细了,废话就不多说了.贴代码了 时针分针秒钟都做上去了,采用的方法也很简单,仔细看一会就能看懂 自定义View类 package com.xh.mytime; import java.u ...
- CentOs6系统安装mailx发邮件
1. yum -y mail* sendmail* postfix* service sendmail start 2. cp /etc/mail.rc /etc/mail.rc.bak cat &g ...
- org.springframework.beans.factory.BeanDefinitionStoreException异常
1.下面是我遇到的异常信息: 2017-03-25 18:01:11,322 [localhost-startStop-1][org.springframework.web.context.Conte ...
- 【C++】模拟实现auto_ptr
看了<Effctive C++>,里面提到用对象去管理资源,可以有效防止内存泄漏. 结合auto_ptr特性,稍微思考了一下,实现了一个简单的auto_ptr (因为代码量小,就不分文件了 ...
- 传输层TCP协议
目录 首部格式数据单位特定注意自动重传请求ARQ具体实现发送缓存接收缓存滑动窗口确认丢失和确认迟到超时重传时间选择报文段的发送时机运输连接发送TCP请求客户端拥塞处理相关概念避免拥塞具体实现TCP 的 ...
- centos5.11架设svn(svn系列 架设服务器 知识一总结)
♣svn是什么? ♣安装 --yum安装 --创建svn版本库目录 --创建版本库 --进入conf目录进行配置(该svn版本库配置文件) --启动svn版本库 - ...