SCSS,混合宏

混合宏的逻辑有点复杂,用法也挺多的,但是,真的很方便,很实用。
看了相关的文档,在自己的框架中,还是主要参考了bootstrap4的混合宏写法。
bootstrap4里面的混合宏层层关联,互相嵌套,各种变量,各种函数,需要全部理清来龙去脉才能知道具体怎么作用的。

主要是用来生成颜色,根据条件,生成不同颜色[……]

Read more……

关于Sass的工作成果

一、创建了一个color变量库;
除基本色,另外包含19个色系,每个主色又包含约15种颜色渐变。
另外又覆盖了一百多个有名字的颜色。
并且,每个色系都增加maps函数,以便需要时调用。
同时针对常用社交icon,也预设了主色。
所有颜色值,均以十六进制颜色表达。

二、创建了一个class变量库[……]

Read more……

完成3.0的Sass重构,接着……

划重点,论工作先后顺序的重要性!

之前考虑重构框架时,思索再三,还是决定先把3.0的重构一下,关键是旧版基本成型,而且已经使用在生产环境中。
这两天,再准备重构4.0的时候,我才发现,我的热情和精力可能被消耗殆尽了,已经很难平静的去做重构工作了。
这是因为,4.0版本虽是大版本的迭代,但还是蜕[……]

Read more……

SCSS自动编译工具

windows下,使用koala实现Sass自动编译。
macOS下,使用codekit实现。

使用命令行命令:compass watch实现监听目录更改,自动编译。
但是,在windows下,大部分时间,监听都不是即时的,需要手动Ctrl+C,才会自动编译,而这个快捷键偏偏又是停止监听的快捷[……]

Read more……

以SCSS重构css framework

终于开始了,是的,心中默念了许久了,一直,迟迟不肯下手,这次算是终于下定决心去做了。

基本上,就在原基础上优化,最多的改变应该是对于颜色,除了少数不变的值,基本都给了变量名。
另外,就是嵌套,SCSS的结构看起来是简洁了很多。
输出的时候,暂时不压缩代码,毕竟,初次使用,保持格式化代码,有利于查漏[……]

Read more……

高效的写代码……

其实很简单,代码补全,错误提示,自动编译、压缩,代码缩进(格式化)及保留适当的空行。

代码补全基本已经是现代编辑器必备的基本功能了。另外,快速的写代码,还需要emmet来实现。

自动编辑、压缩,这个基本靠构建工具实现,各种打包软件。
SCSS+Compass是最佳组合之一。

关于错误[……]

Read more……

css中的!important及版本迭代的前因后果

css的!important该如何使用,何时使用,坦白说,时至今日,我也没有很深刻的认识,这个提升css属性权重的写法,在关键时候很有用,不过,需要明白的是,这个权重的提升,事实上是覆盖了其他的同名写法,提升了权限;往往,你需要提权的地方,可能只是一个唯一的,或者临时需要用到的地方。

所以,要慎重使用[……]

Read more……

CSS之column-count

这是个css3的属性,语法很简单,对类似瀑布流的分栏效果很有用,但某些标签会被截断。

例如容器box分了4栏,里面包含了若干个ul>lili就会被截断,应该显示在第一栏的,尾端的一部分可能因为内容多少的原因换到第二栏显示了。

解决方法也简单,给ul写个display:inline[......]

Read more……

CSS之calc()再续……

应用场景:
首先,响应式设计。
宽100%的情况下,例如一整行文字,文字属性为超长溢出隐藏显示三点省略号,这个场景就要求定义这行文本的宽度,绝对值或百分比都可以。另外,需要在右侧预留点空间放一个小图标或者图片。
如果按百分比,给文本一个百分比,右侧图标或图片一个百分比,在不同设备下,都有单独去[……]

Read more……