写在前面的话：如果你css写了很多了，不妨换一种方式来写写css，也许会提高效率，SASS是我比较喜欢的一种。css本来就不是太难，所以也仅仅介绍SASS常用的用法，避免复杂化，后续用到新的东西，可以再进行拓展。
======正文开始======
我们可以通过一种类似css的编程语言编写代码，保存为.scss后缀名的文件，然后使用SASS进行处理为css文件，而这种.scss文件中可以有变量、嵌套等功能，有些编程的味道；同时.scss文件也能够通过SASS处理为压缩的、缩进的等不同风格的css代码，方便后期的部署。下面是我的一些学习总结。
一、环境布置
1.安装rubby：
SASS是用ruby写的，需要ruby的运行环境，从以下链接下载rubyinstaller进行安装（windows）：http://rubyinstaller.org/
2.安装SASS
安装完成ruby后，接下来安装SASS。由于国内ruby源现在被墙，通过下面方式进行安装SASS，打开cmd命令行。
（1）移除原有的ruby源地址
gem sources --remove https://rubygems.org/
（2）新增可用的ruby源地址
gem sources -a https://ruby.taobao.org
（3） 安装SASS
gem install sass
（4）sublime支持scss文件高亮显示
借助package control安装sass插件，之后set syntax为sass即可。
（5）防止sass中文注释乱码
后续写.scss代码过程中中文注释会有乱码的情况，找到engine.rb文件（一般位于Ruby22\lib\ruby\gems\2.2.0\gems\sass-3.4.18\lib\sass目录下面），在所有的require后面新增如下代码：
Encoding.default_external = Encoding.find('utf-8')
至此，SASS环境部署完成。
二、编译.scss文件为css文件
总结具体SASS语法格式之前，先说一下如何编译.scss文件为css文件。
1.切换到.scss文件所在目录
命令行下切换到代码文件夹目录（如Z:\），假设有文件test.scss文件，里面内容如下：（SASS完全支持css语法）
font-size:17px;
}
h2{
font-size:18px;
}
2.编译scss文件为css文件
运行命令：sass --style compressed test.scss test.css，即可生成压缩版的css文件，并且命名为test.css。几点说明：
（1）--style 后面可以有四个参数可选，分别为expanded、nested、compact、compressed，分别选用不同参数的效果可以自己尝试体验。
（2）test.scss和test.css文件目录可以自定义，例如把Z盘sass目录下的test.scss文件编译为压缩版的文件，并放置在Z盘css目录下，那么命令即：sass --style compressed z:\sass\test.scss z:\css\test.css
（3）开发过程中，只需要修改scss文件，然后编译；前端页面只需要引用相应的css文件即可。
3.侦听文件和文件夹
如果希望某一个scss文件或者相应的文件夹下面文件修改后，自动进行编译，那么可以使用侦听命令。
（1）侦听文件：
sass --watch --style compressed test.scss:test.css
当test.scss文件有修改后，会自动编译为test.css，并且是compressed的。
（2）侦听文件夹：
sass --watch --style compressed sass:css
当sass文件夹下.scss文件有修改的时候，会自动编译为与sass中文件同名的css文件。
备注：
（1）注意源文件和目标文件之间是冒号，与编译命令中为空格不同。
（2）生成的map文件可以查找source map文件的作用。
三、SASS基本用法
下面对SASS基本的用法进行总结，SASS语法与CSS具有极高的相似度。
以下演示源代码放在test.scss文件中，编译后生成的css文件放在test.css文件中，侦听命令为：
sass --watch --style expanded sass/test.scss:css/test.css
1.变量：以$开头。
源代码：
.div1{
background-color:$color1;
}
编译后：
background-color: #aeaeae;
}
/*# sourceMappingURL=test.css.map */
2.变量嵌套在字符串之中：应该以#{}包裹。
源代码：
.div1{
border-#{$left}-width:5px;
}
编译后：
border-left-width: 5px;
}
/*# sourceMappingURL=test.css.map */
3.允许进行计算：
源代码：
.div1{
margin-left:$left+12px;
}
编译后：
margin-left: 32px;
}
/*# sourceMappingURL=test.css.map */
4.允许选择器嵌套：
源代码：
.span1{
height: 12px;
}
.div2{
width: 16px;
}
}
编译后：
height: 12px;
}
.div1 .div2 {
width: 16px;
}
/*# sourceMappingURL=test.css.map */
5.使用&引用父元素
源代码：
&:hover{
cursor: hand;
}
}
编译后：
cursor: hand;
}
/*# sourceMappingURL=test.css.map */
6.注释：
有三种形式：
（1）//comment：该注释只是在.scss源文件中有，编译后的css文件中没有。
（2）/*! */：重要注释，任何style的css文件中都会有，一般放置css文件版权说明等信息。
（3）/* */：该注释在compressed的style的css中没有，其他style的css文件都会含有。
备注：平时（1）（2）使用的多些
7.允许继承：@extend 类名
源代码：
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
编译后：
font-size: 19px;
}
.class2 {
color: black;
}
/*# sourceMappingURL=test.css.map */
注意：如果在class2后面有设置了class1的属性，那么也会影响class2，如下：
源代码：
font-size:19px;
}
.class2{
@extend .class1;
color:black;
}
.class1{
font-weight:bold;
}
编译后：
font-size: 19px;
}
.class2 {
color: black;
}
.class1, .class2 {
font-weight: bold;
}
/*# sourceMappingURL=test.css.map */
可见sass不是单遍编译。
8.引用外部css文件
有时网页的不同部分会分成多个文件来写样式，或者引用通用的一些样式，那么可以使用@import。
源代码：
@import "test2.scss";
@import "test3.scss";
编译后：
font-size: 17px;
}
h2 {
font-size: 17px;
}
h3 {
font-size: 17px;
}
/*# sourceMappingURL=test.css.map */
其中test1.scss、test2.scss、test3.scss文件分别设置的h1 h2 h3。
9.mixin和include：
mixin类似于C语音的宏，存储通用模块，通过@include引用。
源代码：
display:block;
margin:0 auto;
}
.class1{
font-size:16px;
@include common;
}
编译后：
font-size: 16px;
display: block;
margin: 0 auto;
}
/*# sourceMappingURL=test.css.map */
还可以更灵活，像函数一样，如下：
源代码：
display:block;
margin-left:$value1;
margin-right:$value2;
padding:$defaultValue;
}
.class1{
font-size:16px;
@include common(12px,13px,15px);
}
.class2{
font-size:16px;
@include common(12px,13px);
}
编译后：
font-size: 16px;
display: bl
一、我的构想：
世界上本来没有轮子，只是码代码的人多了，也就出现了轮子！由于至今为止咱们还没有研制出一种可以完全自主学习码代码的代码，同时需求也不断朝着复杂化的方向发展，所以造成了代码界的分工越来越细！曾几何时软硬件本为一家，码代码就得依着硬件平台来，通过代码统筹硬件资源完成具体业务需求。而如今，可能一个优秀的程序员都不会修电脑（┑(￣Д ￣)┍）！
哈哈哈，我正是基于这种情况想到为那些精通于某一平台上的应用开发，同时对硬件想了解一下但是又不想从0开始倒弄半天电子元件的编程爱好者，设计一款可以实现简单组合对外呈现API供通信的智能硬件积木。
我还没想好给它起个什么名子，暂且称为“X-积木”！
它是一些模块化的硬件积木，通过不同的组合实现不同的功能。此外，该组合过程中不需要外部重新烧写程序，而维持这一复杂组合与功能重定义的核心在于一个“X-积木OS”！
说简单点类似谷歌当初提出的模块化智能手机，但是模块化智能手机的模块太少或者根本就不是为了多种组合而设计的。我构想的是一种能容纳尽可能多的模块，同时兼容之前各种组合的新型OS。
举个例子：
你有几个MCU模块（该模块上有40个插孔），有一个蓝牙4.0模块（该模块上有4个插针），有一个步进电机驱动的开关模块（能实现对家庭里的灯的按钮实现点击的机械部件，拥有4个插针），有几个电源模块（2个插针），一个温湿度模块（3个插针），两个2.4G模块（4个插针），一个4.3寸的TFT模块（6个插针）
这样你可以：
① 将蓝牙模块和步进电机模块随机插到MCU模块上，用电源模块给系统供电。系统第一次重启后会对MCU周边设备进行检查保存当前周边信息并重组操作系统，接着自动重启，本次重启后系统将运行重组操作系统。该系统对内并保持对周边设备变化的监听，对外根据其搭载的不同信号发送模块（如蓝牙、wifi或2.4G）以及搭载的不同机械或传感器模块提供重组的通信渠道。如本例，重组后的系统发现自身连接步进电机机械模块和蓝牙模块，便会对外提供一些列通过蓝牙控制步进电机的接口。特别注意：这里独立的通信模块封装有自己的通信接口，同时其和其他模块组合时会产生新的通信接口。
这样，你只要略懂一些平台的关于蓝牙的应用程序开发，你就可以通过自己的代码控制自己设计的硬件系统了！用上面的4个模块+一个精通IOS\Android\WIN的编程爱好者=一个简单的远程遥控开关
② 还有更炫的：一个温湿度检测模块+光照强度检测模块+土壤水分检测模块+MCU+POWER+BT4.0=?
是一个盆栽智能硬件！通过土壤传感器收集土壤水分数据、光照及温湿度传感器收集盆栽周围的温湿度和光照数据通过蓝牙周期性地将数据发出。如果你是一个对数据痴迷的编程爱好者，你可以基于这个玩具将数据整理并做出可视化的炫酷数据展示界面；如果你是一个对人工智能比较狂热，你可能基于该平台将你构建的盆栽培养专家系统集成进来，做一个智能的盆栽APP,说不定就火了！当然，如果我们有吸水泵模块，水量控制阀模块，甚至是化学反应罐模块，你能做出一个全自动的盆栽系统！！！
接下来的计划：
至此，很多人应该已经兴奋地从睡梦中惊醒（当前时间3:06）！此系统一出，必天下大乱，风起云涌，就像当年苹果商店造就了无数APP开发者一夜暴富的神话，这东西也具有相同但更优质的属性（(～￣�￣)～白日做梦结束）！可能一些隐藏在人群中的高手早已看穿一切——一个动态改变系统的系统谈何容易，PC发展这么多年也就多了个USB这个通用接口。
确实，对“X-积木OS”期望太高反而会让我们感觉无从下手。此刻我们就像站在一座金字塔面前，思考着如何绘制一张绝妙的蓝图来构建起这一庞然大物是走不通的。俺也不敢大话放在前面——走一步算一步！明天“同”一时间，同一地点，探讨别人家的智能硬件积木是怎么玩的！
@beautifulzzzz
2015-9-5 持续更新中~
本文链接：如何为编程爱好者设计一款好玩的智能硬件（一）――即插即用、积木化、功能重组的智能硬件模块构想，转载请注明。
没有评论:
发表评论