sass安装使用
来源:互联网 发布:淘宝卖家给买家的评价 编辑:程序博客网 时间:2024/05/28 11:47
1.scss和sass的区别
SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。另外,SCSS 还能识别大部分 CSS hacks(一些 CSS 小技巧)和特定于浏览器的语法,例如:古老的 IE filter
语法。
由于 SCSS 是 CSS 的扩展,因此,所有在 CSS 中正常工作的代码也能在 SCSS 中正常工作。也就是说,对于一个 Sass 用户,只需要理解 Sass 扩展部分如何工作的,就能完全理解 SCSS。大部分扩展,例如变量、parent references 和 指令都是一致的;唯一不同的是,SCSS 需要使用分号和花括号而不是换行和缩进。 例如,以下这段简单的 Sass 代码:
#sidebar width: 30% background-color: #faa
只需添加花括号和分号就能转换为 SCSS 语法:
#sidebar { width: 30%; background-color: #faa;}
另外,SCSS 对空白符号不敏感。上面的代码也可以书写成下面的样子:
#sidebar {width: 30%; background-color: #faa}
LESS和Sass之间的主要区别是他们的实现方式不同,LESS是基于JavaScript运行,所以LESS是在客户端处理。
另一方面,Sass是基于Ruby的,是在服务器端处理的。很多开发者不选择LESS是因为LESS输出修改过的CSS到浏览器需要依赖于Javascript引擎,而Javascript引擎需要额外的时间来处理代码。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦开发完成,我就复制粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一种方式是使用LESS APP来编译和压缩你的LESS文件。两种方式都将是最小化你的样式输出,从而避免由于用户的浏览器不支持Javascript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。
LESS转译工具除了LESS APP之外,现在目前流行的主要有:SimpLess、WinLess、CodeKit.app、LESS编译辅助脚本-LESS2CSS。
——大漠
更新:在Twitter的评论上,LESS和Sass对比讨论也是相当的热烈。也请考虑Adam Stacoviak回复。现实情况,Sass确实需要在Ruby上运行,然而他不需要在服务器上编译CSS。它也可以在本地编译(正如前面提到的LESS),编译后的CSS可以运用到你的项目上,Wordpress主题中.引擎模板,或者任何服务器就像你的CSS文件。
原文: http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com3.ruby和sass的关系
这个是关于ruby(一种面向对象程序设计的脚本语言) 的百度百科
https://baike.baidu.com/item/Ruby/11419?fr=aladdin&fromid=2565160&fromtitle=ruby%E8%AF%AD%E8%A8%80
sass是由ruby语言开发而成,所以安装sass之前, 要先安装ruby
4.安装sass
(1)ruby安装
ruby下载网址:
https://rubyinstaller.org/downloads/
安装的时候注意一点,必须要勾选这2栏
安装好之后, 打开cmd控制面板输入ruby-v
ruby -v//如安装成功会打印ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]
出现上面的样子就说明ruby安装成功了(2)sass安装
ruby已经安装成功。但因为国内网络的问题导致gem
源间歇性中断因此我们需要更换gem
源。如下:
//1.删除原gem源gem sources --remove https://rubygems.org///2.添加国内的源gem sources -a http://gems.ruby-china.org/
(
!!!注意注意
:淘宝源('https://ruby.taobao.org/')已经不维护了----->http://www.oschina.net/news/71749/taobao-gems-ruby-china)
//3.打印是否替换成功gem sources -l//4.更换成功后打印如下*** CURRENT SOURCES ***https://ruby.taobao.org/
Ruby
自带一个叫做RubyGems
的系统,用来安装基于Ruby
的软件。我们可以使用这个系统来 轻松地安装Sass
和Compass
。要安装最新版本的Sass
和Compass
,你需要输入下面的命令:
//安装如下(如mac安装遇到权限问题需加 sudo gem install sass)gem install sassgem install compass
在每一个安装过程中,你都会看到如下输出:
Fetching: sass-3.x.x.gem (100%)Successfully installed sass-3.x.xParsing documentation for sass-3.x.xInstalling ri documentation for sass-3.x.xDone installing documentation for sass after 6 secon1 gem installed
安装完成之后,你应该通过运行下面的命令来确认应用已经正确地安装到了电脑中:
sass -vSass 3.x.x (Selective Steve)compass -vCompass 1.x.x (Polaris)Copyright (c) 2008-2015 Chris EppsteinReleased under the MIT License.Compass is charityware.Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
如下sass常用更新、查看版本、sass命令帮助等命令:
//更新sassgem update sass//查看sass版本sass -v//查看sass帮助sass -h
补充一下compass:Compass由SASS的核心团队成员Chris Eppstein创建,是一个非常丰富的样式框架,包括大量定义好的mixin,函数,以及对SASS的扩展。
5.sass在webstorm编辑器下进行自动编译
1.用webstorm打开工程, 然后在左上角file里面点击setting
会出现一个界面,然后点击界面里面tools里面的File Watchers
然后再点击右上角的绿色的加号
点击加号,选择scss
更改Program里面的地址, 改成当初下载的ruby包里面的bin里面的scss.bat
再点击ok就行了.
6.使用scss
1.新建一个a.scss下方就会自动生成a.css.并且上方会出现一个a.css.map(!!!注意注意:文件夹必须不能有中文, 不然可能出现不能自动编译等一系列错误)
文件夹:
scss:
css:
css.map:
- sass 安装使用杂记
- bootstrap-sass安装使用
- sass安装使用
- 【SASS-01】Sass安装与使用
- Sass&Compass安装和使用
- sass的安装与使用
- SASS的安装和使用
- ruby以及sass安装、使用
- SASS学习——SASS的安装及使用
- Sass的安装与使用经验
- sass 的下载、安装、初次使用、入门
- Sass的安装使用及入门
- 使用npm安装node-sass时报错
- node-sass 的安装和使用
- 安装SASS
- sass安装
- 安装sass
- 安装SASS
- 卷积神经网络进行图像处理的工作原理
- 阿里云CentOS 6.8 + WordPress + 芒果云KODExplorer
- javaweb学习总结(八)——HttpServletResponse对象(二)
- pods导入的库为什么引入头文件的时候不显示?
- Linux如何杀死僵尸进程
- sass安装使用
- 关于RK312X机顶盒databk克隆失败的解决办法
- SpringBoot支持JSP页面跳转(基于Gradle)
- 4277 USACO ORZ
- 相对定位与绝对定位
- redis存储与读取对象和对象集合
- 文章标题
- iOS 蓝牙开发基础
- ajax动态赋值echarts(饼图和柱形图)