Chrome --流行的浏览器,及前端开发调试工具
WebStorm --强大的跨平台前端集成开发环境
Sublime Text --神器级别的代码编辑器,如vim般强大,而上手难度极低。
---------------------------------------
为什么需要CSS预处理器? 如果最终生成的是CSS代码,为什么不干脆写CSS? 为什么使用Sass?
使用变量
自动转换RGBA颜色值
忘记浏览器前缀
嵌套规则
media query更简单
自动压缩CSS http://sass-lang.com/ CSS并不能算是一门真正意义上的“编程”语言,无法完成嵌套、继承、设置变量等工作 解决CSS的不足,开发者想到了编写一种对css进行预处理的“中间语言”
------------------------------------
Sass是css的预处理器,Compass是Sass的工具库。
Sass是css3的扩展方向。
在Sass的基础上封装了一系列有用的模块和模板,补充Sass的功能
Compass与Sass的关系类似于jQuery与JavaScript的关系 -----------------
compass、sass安装
http://compass-style.org/install/
https://www.sass.hk/install/
基于rubby语言,安装rubby
https://rubyinstaller.org/downloads/
rubby安装后gem看安装是否成功,如果不成功把C:\Ruby22\bin加入环境变量path,
gem install compass 安装不成功 使用 https://github.com/ruby-china/Ruby China 官方搭建的 RubyGems 镜像网站,此仓库是服务器源代码:http://sh0.gems.ruby-china.org 就能安装compass了。
https://ruby.taobao.org/已经不再维护了。 compass依赖sass,安装conpass就会安装sass, -----------------
Sass:
现在兼容css语法,强大的库,Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。
Less:
人气最高,最先兼容css语法,是最大的预处理器,
2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了。
其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更佳方便,Alexis开发了LESS并提供了类似CSS的书写功能。
Stylus:
Stylus,2010年产生,来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如Sass和LESS。 Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。 ---------------------- 1、Sass需要安装Ruby,然后通过gem安装sass 2、Less有两种安装方式:
客户端安装:引入less.js,然后就可以直接使用.less文件
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script> 服务器安装:先安装node,然后使用npm安装less。
3、Stylus的安装类似于Less的服务端安装,用npm安装。
---------------------------
1、三者都是开源项目;
2、Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;Stylus早期服务器Node JS项目,在该社区得到一定支持者;LESS出现于2009年,支持者远超于Ruby和Node JS社区;
3、Sass和LESS语法较为严谨、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为他更像CSS的标准;
4、Sass和LESS相互影响较大,其中Sass受LESS影响,已经进化到了全面兼容CSS的SCSS;
5、Sass和LESS都有第三方工具提供转译,特别是Sass和Compass是绝配;
6、Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特性实现功能基本相似,只是使用规则上有所不同;
7、Sass和Stylus具有类似于语言处理的能力,比如说条件语句、循环语句等,而LESS需要通过When等关键词模拟这些功能,在这一方面略逊一层;
---------------------------------
------------------------------------------------
sass:
h1
color:red;
//变量定义
$color:red;
//嵌套
body{
head{
}
section{
}
}
------------------------------------------------
scss:
h1{
color:red;
}
//变量定义
$color:red;
//嵌套
body{
head{
}
section{
}
}
//函数
@mixin alert($color:blue){//blue是默认值
color:$color;
}
//继承
.block{
margin:10px;
padding:5px;
}
p{
@extend .block;
}
------------------------------------------------
less:
h1{
color:red;
}
//变量定义
@color:red;
//嵌套
body{
head{
}
section{
}
}
//函数
.alert(@color:blue){//blue是默认值
color:@color;
}
//继承
.block{
margin:10px;
padding:5px;
}
p{
.block;
}
------------------------------------------------
Stylus:
h1{
color:red;
}
h1
color:red;
h2
color red;
//变量定义
$color:red;
color:red;
//嵌套
body{
head{
}
section{
}
}
//函数
alert($color = blue){//blue是默认值
color:$color;
}
//继承
.block{
margin:10px;
padding:5px;
}
p{
@extend .block;
}

sass01的更多相关文章

随机推荐

  1. eclipse历史版本下载地址

    http://wiki.eclipse.org/Older_Versions_Of_Eclipse

  2. 51nod 1321 收集点心(最小割)

    给出一种最小割的方法. 设\(num1[i]\),\(num2[i]\)为第i种形状的点心的两种口味的数量 设\(type[i]\),\(type[i]\)为第i种形状的点心的两种口味 假设\(num ...

  3. java 获取config 配置文件

    static ResourceBundle PropertiesUtil = ResourceBundle.getBundle("config"); public static S ...

  4. FTP 无法获取目录列表的处理方法

    FTP 无法获取目录列表的处理方法 1.以阿里云的服务器为例 对于阿里云的服务器是因为阿里云为了进一步保护用户的安全利益使用了安全策略组,我们要设置安全策略组对应的端口开启. 首先要设置端口范围,这个 ...

  5. 洛谷 P1417 烹调方案 (01背包拓展)

    一看到这道题就是01背包 但是我注意到价值和当前的时间有关. 没有想太多,直接写,0分 然后发现输入方式不对-- 改了之后只有25分 我知道wa是因为时间会影响价值,但不知道怎么做. 后来看了题解,发 ...

  6. window下搭建Python3.7+selenium3.1.1+pycharm环境

    1.安装Python3.7 1.1  下载 Python并安装 Python3.5 (勾选上 Add Python3.7 to PATH) 点击 Install Now,安装完成后将python路径加 ...

  7. ZOJ 2702 Unrhymable Rhymes

    Unrhymable Rhymes Time Limit:10000MS     Memory Limit:32768KB     64bit IO Format:%lld & %llu De ...

  8. BZOJ 4236~4247 题解

    BZOJ 4236 JOIOJI f[i][0..2]表示前i个字符中′J′/′O′/′I′的个数 将二元组<f[i][0]−f[i][1],f[i][1]−f[i][2]>扔进map,记 ...

  9. hdu5391Zball in Tina Town

    //求(n-1)!%n //n 为合数,答案为0,n为素数 . 威尔逊定理可得 //判定一个自然数是否为素数的充分必要条件. 即:当且仅当p为素数时:( p -1 )! ≡ -1 ( mod p ) ...

  10. 从头认识Spring-1.16 SpEl对集合的操作(1)-建立集合以及訪问集合的元素,以&lt;util:list/&gt;为例

    这一章节我们来讨论一下怎样建立集合以及訪问集合的元素? 1.建立集合? (1)domain 蛋糕类: package com.raylee.my_new_spring.my_new_spring.ch ...