SASS的一些使用体会(安装-配置-开启firefox的调试)
对CSS预处理这个东西的看法,基本就是2种
第一种:不就是css吗,我会写就好了搞得那么复杂干嘛
第二种:感觉这个东西非常有必要,它规范了代码,使开发变得更轻松
好吧以前我是第一种,并且觉得又要配置环境,又要按照他的写法非常的麻烦!用了一阵子之后发现有点离不开它了!囧~~
实际上很多东西不是你主观认为他没有意义就不去用。。。毕竟它存在,而且大公司都在用,这就说明着这个东西肯定有优点!
好吧,我用的是sass然后对nodeJS至今还是有点小抵触。。。我就叛逆了~~吐槽结束!!!
在线测试版:http://sassmeister.com/
然后什么情况要用到mixins看着bootstrap你就明白了-_-//
https://github.com/twbs/bootstrap/tree/master/less
先说安装吧!这个东西不用和nodejs那样搞得那么复杂
装个ruby。。。
Ruby下载安装
....一路无话
然后安装
gem install sass
按回车键确认,等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害,如果你没有安装成功,那么请参考下面的淘宝的RubyGems镜像安装sass,如果成功则忽略。
如果要安装beta版本的,可以在命令行中输入
em install sass --pre
你还可以从sass的Git repository来安装,git的命令行为
git clone git://github.com/nex3/sass.git cd sass rake install
升级sass版本的命令行为
gem update sass
查看sass版本的命令行为
sass -v
你也可以运行帮助命令行来查看你需要的命令
sass -h
淘宝RubyGems镜像安装 sass
由于国内网络原因(你懂的),导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources
命令来配置源,先移除默认的https://rubygems.org
源,然后添加淘宝的源https://ruby.taobao.org/
,然后查看下当前使用的源是哪个,如果是淘宝的,则表示可以输入sass安装命令gem install sass
了,关于常用gem source命令可参看:常用的gem source
$ gem sources --remove https://rubygems.org/ $ gem sources -a https://ruby.taobao.org/ $ gem sources -l *** CURRENT SOURCES ***https://ruby.taobao.org # 请确保只有 ruby.taobao.org $ gem install sass
最后安装好了
然后写了。。。当然怎么写我在这里就不说了,毕竟大漠,阮一峰之类的大大都已经很久以前就写过了,参照他的文章看看就好了
大漠sass基本写法 阮一峰SASS用法指南
然后该怎么调试呢
我是比较喜欢用firefox
首先我们需要安装一个FireSass for Firebug
如果百度百度不到最新版的,我这边到是有个
http://files.cnblogs.com/files/LoveOrHate/firesass_for_firebug-0.0.12-fx.xpi
然后scss的文件出现在firebug上咯
但是你会发现写的变量,函数都没有出来!怎么办呢
sass --watch --style expanded style.scss:style.css
这个时候我们找到项目目录里面的scss。开启调试模式
然后
然后你的一些mixin,@import,继承,参数全部都执行了!!
(最后还是把别人的简化复制一个出来,下面内容原地址:http://caibaojian.com/use-sass-compass-write-css.html)
1.Variables 變數
使用$
作為開頭當參數
2.Nesting 巢狀結構
很清楚的知道 誰是誰的子元素,不用像以前一樣 寫一大排重復的開頭了
3.Mixins
其實就像function一樣使用,還可以帶參數
設定預設參數
4.Inheritance 繼承
另外幾個常用的功能
1.@import
可以將網站的各部份樣式拆開成_head.scss
, _body.scss
, _foot.scss
放置在base資料夾下,可利用@import功能把3個檔納入到main.css
裡
只要在main.scss
加上
@import "base/head"; @import "base/body"; @import "base/foot";
_head.scss
, _body.scss
, _foot.scss
這些檔案都不會被編譯成css,記得檔案名稱需以 _
底線作開頭!
2.算數
3.顏色功能
lighten(red, 50%) //增亮50% darken(blue, 50%) //變暗50%
更多功能參見官方說明
http://www.w3cplus.com/preprocessor/getting-started-with-sass-part-1.html
http://www.w3cplus.com/preprocessor/getting-started-with-sass-part-2.html
转载于:https://www.cnblogs.com/LoveOrHate/p/4519336.html
SASS的一些使用体会(安装-配置-开启firefox的调试)相关推荐
- 关于svn的安装配置开启服务过程和 eclipse安装SVN插件的方法
eclipse安装SVN插件的方法链接:https://www.cnblogs.com/alamps/p/6155963.html svn的安装配置开启服务相关过程: 安装一直下一步cmd中:echo ...
- php 设置断点,PHP xdebug安装配置(支持断点调试)
1.xdebug下载安装 xdebug下载地址: 下载对应自己php版本的xdebug后安装. 如果不知道该下载那个版本,点击下载页面按钮"custom installation instr ...
- 443 k8s配置开启nginx_SSL证书不会安装配置?手把手教会你,3步搞定
本文为远怀学堂原创,纯干货分享 我们昨天发布的一篇教程(免费的SSL证书它不香吗?香,真香!)跟大家分享了如何通过阿里云去申请免费的SSL证书,有效期1年,支持个人/企业申请,一个阿里云帐户最多可签发 ...
- Python爬虫——Selenium安装配置FireFox浏览器
Selenium安装配置FireFox浏览器 前置需求: 1. 下载安装FireFox浏览器和Geckodriver 1.1 Windows下载 1.2 Linux下载 2. 使用Selenium调用 ...
- selenium和Firefox的安装配置
selenium和firefox的安装配置 1.1.Firefox的安装 1.2.Firefox驱动geckodriver的安装 1.3.geckodriver环境配置两种方式 1.3.1.直接添加 ...
- groovy安装配置及其开启indy、@CompileStatic
groovy安装配置及其开启indy.@CompileStatic 前提 groovy安装 indy版本切换 java.非indy.indy.@CompileStatic四种方式的字节码比较 知识点 ...
- 测试linux mongodb数据库开启,安装配置MongoDB数据库
安装配置MongoDB数据库 实验环境: 系统环境:rhel6 x64 selinux and iptables disabled 一.安装MongoDB [root@server1 ~]# ls m ...
- 开启hadoop之旅的大门–安装配置篇
by 三江小渡 主要写了JDK配置和hadoop的安装配置.windows下安装也类似,只是需要一个windows模拟linux环境的软件Cygwin.不过在windows下安装JDK很方便了,就不用 ...
- httphost设置socks_socks5代理使用和安装配置
Socks简介: 详情可以百度,不过我猜你对那一大堆术语也会像我一样觉得无语, 所以我觉得你可以简单理解为它可以比较完美代理http/ftp/smtp等多种协议的代理工具就行了. 其中最具有典型例子的 ...
最新文章
- linux 定时清理tomcat日志
- 基于微信小程序的比赛报名系统
- 用spark中DataFrame对数据进行去重、缺失值处理、异常值处理
- C#调用报表生成器成功案例示例研究
- 月薪30K的硬件工程师需要哪些技能
- opencv-python控制笔记本摄像头
- windows Internet Connection Sharing(ICS)服务的启动
- larval 捕获mysql错误_larval 如何捕获mysql错误
- 量子计算发展史上的27个里程碑事件
- SQL on log : 同比分析各种指标
- 【python脚本系列】gif录制png序列帧
- 狂神docker学习笔记
- GAF安装部署-微服务架构下的云原生部署
- Redis相关知识点
- AWS OpenSearch 1.0 简单部署安装
- Mean Average Precision(MAP):平均精度均值
- 兄dei,帮我开一下门吧~
- 易经卦象基本类别与其类象运用思路
- 如何构建智能湖仓架构?亚马逊工程师的代码实践来了
- 从零开始的ZYNQ学习(基于矿卡EBAZ4205)(四)
热门文章
- cordova常用命令
- self.a 和 _a 的区别
- 泛型 与 实体类的相互转换
- Hyperlink的target属性的用法
- VS2012及VS系列怎样屏蔽CMD窗口~
- 对等网不要求文件服务器,对等网文件共享技术研究与应用
- leetcode算法题--Unique Binary Search Trees II
- Spring Cloud Netflix Eureka 配置参数说明
- 2018阿里云云数据库RDS核心能力演进
- Cloud Native Computing Foundation Welcomes the NATS Messaging Protocol into the Fold