网站推广的途径和要点,泉州cms建站系统,域名做违法网站,国外获奖网站前言#xff1a; 前两天打算清理电脑的时候#xff0c;遇到了一点特殊的问题#xff0c;打算重装一些东西#xff0c;其中就有我一直用的顺手的SASS预编译工具。 但是在重装的时候#xff0c;我发现我居然不会用了#xff1f;#xff1f;#xff1f; 靠#xff0c;要不…前言 前两天打算清理电脑的时候遇到了一点特殊的问题打算重装一些东西其中就有我一直用的顺手的SASS预编译工具。 但是在重装的时候我发现我居然不会用了 靠要不是我用了半年的Sass,我真以为我这个垃圾的切图仔用了个假的sass。 这里整理一下安装的过程排除掉安装中遇到的坑同时也细数一下sass的用法和好处如有不足之处欢迎指正和留言 当然如果要看更准确的欢迎直接www.sass.hk/install/ 以下仅仅是我个人的整理笔记为了改掉我早期不爱写笔记的坏毛病。 这些内容是基于我自己的理解整理出的模式目的是为了交流和回忆这些都是留给我以后填坑用的如果要是有兴趣欢迎指正。 安装过程 下载准备 这里放上rubywww.ruby-lang.org/en/download… 有能力的朋友可以直接用命令行下这时候的我还不太会命令行工具。。 安装ruby环境 Q肯定有人会问这里为什么要先装ruby这个东西这是什么东西 A:这里稍微解释一下这个一个编程工具sass就是基于ruby编译出来的一个工具至于他有什么好处有什么特殊的地方这些你统统不要了解他的存在就是为sass提供一个运行环境而已 安装sass文件 我是window系统所以打开CMD命令行然后什么都不要做直接输入以下命令 gem install sass
复制代码完成后 题外话 安装的方式并非是绝对我这一种但是目前这是我自己试过最稳妥的方式如果你用过nodejs的话那么可以走node路径下载有了vpn的话甚至比我这种方式还快 Sass的优点 可以计算 变量定义 嵌套写法 继承用法 个人观点 以上基本上是我在sass使用过程中最直观的感受尤其是嵌套和继承这两个可能新人刚开始用的时候会觉得不是那么好用但是用久了你就会发现这真是好用比起CSS那种重复写法真是省事太多了 可以计算还有定义变量这两种用法也相当好用毕竟很多时候我是真的懒得去一个个改页面中的那些数据 Sass的编译风格: 这一段引用自blog.csdn.net/u013034014/…。 早期对官方那种较为死板的说明方式很是不喜所以错过了官方那种明白的教程走了很长时间的弯路。 弯路走了很多不过最终应该也是走到了正路上了靠着这篇博客我也算是把SASS最后这段弯路给补全了吧。。。。 希望各位新人在学习的时候尽可能的多看各种官方文档毕竟没有比官方文档更正确的了。。 因为每个前端工程师编写代码的风格都不太一样所以Sass的编译也非常人性化的提供了不同风格的编译方式主要分为4种 嵌套输出 nested展开输出 expanded紧凑输出 compact压缩输出 compressed肯定有人疑惑这四种方式到底是什么意思后边的英文又是做什么的那么话不多说直接进入正题吧。 CSS源码 nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; }
}
复制代码1.嵌套输出 nested: nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
复制代码这是默认的风格我一开始不知道怎么调的时候很是伤脑筋总觉得这个默认风格特别傻并不是特别好用。 2.展开输出 expanded nav ul { margin: 0; padding: 0; list-style: none;
}
nav li { display: inline-block;
}
nav a { display: block; padding: 6px 12px; text-decoration: none;
}
复制代码这是我以前傻写CSS常用的编写方式看着非常舒服和习惯如果要是预编译给我自己看的话我用的就是这种方式。 3.紧凑输出 compact nav ul { margin: 0; padding: 0; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }
复制代码这个也就是所谓的单行CSS格式啦还是有不少人喜欢这个风格的。。话说这种傻屌的用法真的不怕自己眼睛不够用吗。。。我真的是觉得这个用法比较瞎眼。。。 4.压缩输出 compressed nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
复制代码也就是变成了压缩之后的CSS代码去掉了所有的空格和换行。如果是特别巨大的页面工程推荐使用这个编码风格。 这里稍微解释一下为什么说这种风格适合大的页面工程 首先空行和空格这两样在CSS样式中在载入渲染的时候会占有一定的资源的。 也许这在简单的页面没有什么感觉。但是对于那种上万行CSS样式的项目来说这就很要命了就算一个空行消耗的时间可以忽略那上万行下来的时间傻子也能看出来不对劲。 所以这样压缩便有了以下的优势 1、减小了文件的体积2、减小了网络传输量和带宽占用3、减小了服务器的处理的压力4、提高了页面的渲染显示的速度Sass四种编译风格的实现方法 首先先说明一点实现的方式并非只有一种但是在经历了koala的崩盘后我对外部工具已经不是很信任了也许这些可视化工具让sass编译的过程显得很轻松易懂但是一旦出了问题可就不是那么轻松易懂了所以我个人推荐还是用命令行来编辑还是命令行这玩意靠谱。。 所以以下只介绍一种编译方式命令行编译其余的方式自行上官网了解吧。SASS中文网www.sass.hk/install/ 还有之前那位大佬的博客这里也贴一下blog.csdn.net/u013034014/… 固有格式 sass --watch SASS文件名.scss:想要的CSS文件名.css --style 四种方式中你想要的输出风格
复制代码以压缩编译为例 sass --watch style1.scss:style1.css --style compressed
复制代码好吧其实很简单就是在原来编译指令的后面加了 --style 输出风格 所以只要依据需求把compact,compressed这样的参数写在--style后面就行 结语 以上就是对SASS的梳理了用了这么就对于SASS的使用还是略有一点心得的说起来惭愧这么长时间了这恐怕是我唯一用的熟手的东西了。 但是这段时间在见识了各路大佬那恐怖的学习速度后我不认为我这点熟手的东西有什么值得自豪的也许只是一两天就能弄明白的东西吧。 如果我上边说的有什么不对的地方还请指教最后在这里谢过了。
