sass,less的安装及sass的教程
2017-01-06 18:03
183 查看
装scss(window)
首相安装ruby
http://www.sasschina.com/install/
scss转译css
http://www.cnblogs.com/52css/archive/2012/08/19/sass-how-to-install-and-use.html
如果安装之后在cmd(以管理员),在到saxx文件目录,如果在输入
提示:gem不是内命令,那是变量环境没有安装,有两种解决办法
1.重新安装ruby,在ruby安装面板中勾选三个参数,即可自动添加环境变量
2.点击我的电脑数据,更改设置,高级,环境变量(也就是手动添加环境变量)
将scss文件转化css文件的命令
less的安装
另外编辑HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下:
1、安装sass,参考:http://www.w3cplus.com/sassguide/install.html
2、如下图,菜单‘工具’下,选择‘预编译器设置’→选择‘.sass,.scss’,点击编辑,弹出对话框:
a、文件后缀不变,为:.sass,.scss
b、触发命令地址填写sass的安装路径,如:我的本机sass路径为:d:\Ruby22\bin\sass.bat
c、命令参数:
这一段代码其实就是一段ruby语言,你看单词也猜是什么意思
简单说sass的用法,详细可去阮一峰sass博客
1.嵌套
1.1节点嵌套
1.2 属性嵌套
2.继承
3.运算
处理浏览器前缀问题的办法
首相安装ruby
http://www.sasschina.com/install/
scss转译css
http://www.cnblogs.com/52css/archive/2012/08/19/sass-how-to-install-and-use.html
如果安装之后在cmd(以管理员),在到saxx文件目录,如果在输入
gem install sass
提示:gem不是内命令,那是变量环境没有安装,有两种解决办法
1.重新安装ruby,在ruby安装面板中勾选三个参数,即可自动添加环境变量
2.点击我的电脑数据,更改设置,高级,环境变量(也就是手动添加环境变量)
将scss文件转化css文件的命令
sass --watch demo.scss:demo.css
less的安装
npm install -g less # 在这之前安装node
另外编辑HBuilder自带未安装的less插件,但是sass插件却没有,需要自己安装,步骤如下:
1、安装sass,参考:http://www.w3cplus.com/sassguide/install.html
2、如下图,菜单‘工具’下,选择‘预编译器设置’→选择‘.sass,.scss’,点击编辑,弹出对话框:
a、文件后缀不变,为:.sass,.scss
b、触发命令地址填写sass的安装路径,如:我的本机sass路径为:d:\Ruby22\bin\sass.bat
c、命令参数:
--no-cache %FileName% ../css/%FileBaseName%.css --style compact
这一段代码其实就是一段ruby语言,你看单词也猜是什么意思
--no-cache 表示没缓存 %FileName% 表示文件名 ../css/%FileBaseName%.css 表示存储css文件目录地址(相对) --style 表示格式,有4种格式:nested expanded compact compressed
简单说sass的用法,详细可去阮一峰sass博客
1.嵌套
1.1节点嵌套
text { font-size: 12px; p { text-indent: 20px; } }
1.2 属性嵌套
.box { border: 1px solid #ddd; { left: 0; right: 0; } }
2.继承
.class1 { border: 1px solid #ddd; } .class2 { @extend .class1; }
3.运算
$var: 1100px/7;//长度带单位 $a: 1100px - 200px; //+、-时前后要有空格
处理浏览器前缀问题的办法
相关文章推荐
- sass安装教程
- sass、less和stylus的安装使用和入门实践
- sass、less和stylus的安装使用和入门实践
- sass、less和stylus的安装使用和入门实践
- Windows7下安装 Nodejs 并在 WebStorm 9.0.1 下搭建编译 LESS 环境的图文教程
- SASS安装教程详解
- vue 安装 sass,scss,less
- WebStorm 8.0安装LESS编译环境的教程
- sass、less和stylus的安装使用和入门实践
- gulp安装&less插件教程
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- webstorm9.3 安装less 编译css教程
- SASS安装教程
- sass、less和stylus的安装使用和入门实践
- sass、less和stylus的安装使用和入门实践
- asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程
- sass、less、stylus的安装及使用
- 安装程序制作简明教程
- 教程-Win2003下APACHE+PHP5+MYSQL4+PHPMYADMIN 的简易安装配置
- Linux下安装WINE支持汉字教程