标签:ble 配色方案 常用工具 20px 分享图片 .com 变暗 功能 特定
原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f
我坦白我是标题党,SB只是
SCSS-Bourbon
的简写。
SASS
,也称为SCSS
,是CSS预编译语言的一种,常见的预编译语言还包括LESS
,Stylus
,除了语法风格之外它们之间没有什么太大的区别,从一种语言迁移到另一种语言只需要花半天通读一下文档就可以了。预编译语言为CSS提供了变量定义
,函数定义
,层级嵌套
等等一系列扩展功能,使开发者更容易编写和管理项目中的CSS代码。笔者使用的是SCSS/SASS
,因为相关工具库更全面一些,尽管名称偶尔会带来一些瑕疵(建议使用SCSS
)。LESS
在和Sublime
集成时有一些小问题,可能是版本问题,stylus
是新兴起的,开发生态并不完善。
由于SCSS
最初使用Ruby on Rails
编写的,所以github
上提供的安装方式几乎都是通过gem install
安装的,但实际上在npm
仓库里也可以找到对应的项目。另一方面,SCSS
辅助工具库中的工具都是以_
开头的,也就是说定义mixin
的代码并不会被编译到产出的CSS
文件中,可以放心使用。
【Bourbon】是笔者非常喜欢的工具包,首先它很符合渐进式开发
的思想,每个插件只实现一个特定的功能,同时,它的所有插件都是自己开发的(ThoughtBot
在收购后维护着整个Bourbon工具链),这又保证了工具的质量。
? 通过npm install -g bourbon
安装.
bourbon
已经更新至5.1.0
版本,官方文档对许多mixin
并没有提供说明,建议使用前通读一下library
目录里每一个独立的文件,其中的注释部分标明了该函数的用法。例如实用triangle( )
函数来生成一个类,使其伪类包含一个指定尺寸和方向的三角形,又或者是使用tint( )
或shade( )
方法让颜色按照半分比变亮或变暗,当然你也可以自行去扩展bourbon
的基础功能。
SCSS代码为:
@import "bourbon";
.triangle-down {
&::after{
content:‘‘;
@include triangle("down", 2rem, 1rem, #b25c9c);
}
}
编译后的代码:
.triangle-down::after {
content: ‘‘;
border-style: solid;
height: 0;
width: 0;
border-color: #b25c9c transparent transparent;
border-width: 1rem 1rem 0;
}
纯CSS
是可以诸如六边形等很多形状的,你完全可以在网上学习它们的实现方法,然后将其编写为扩展的mixin
加入到自己的常用工具箱中。
? 通过npm install -g bourbon-bitters
安装
Bitters
是Bourbon工具家族里的脚手架,它将你的基础样式分拆为*_bass* , *_buttons* , *_forms* , *_layout* , *_lists* , *_media* , *_tables* , *_typography* , *_variables* 等几个不同的文件并提供一些初始样式,开发中可以将与基础模块相关的样式扩展写在这些文件中,这样的做法可以在一定程度上降低项目的维护难度。
当然你也可以直接引入normolize.css
来对项目进行样式的重置。
? 通过npm install -g bourbon-neat
安装.
我们使用的第三方UI框架中,几乎都使用经典的12列布局,但总有些产品经理会提出希望将某一列的宽度扩展到1.5倍这种需求,或者有些场景下你希望对整个网页的布局进行更精细的控制,这个时候轻量级的网格工具Neat
就派上用场了,轻量,强大,易用,轻松实现网格划分,网格嵌套,响应式布局等复杂的功能。具体的使用文档可以访问其官方网站Neat官方网址查看文档。
使用示例:
下面简单的几行代码编译为CSS后,就可以实现将页面分为间距为20px的10列,左侧边栏占2列,右侧内容区占8列;然后又将右侧内容区分为间距为10px的6列,每个表格项占1列。
@import "neat";
/*定义网格*/
$sidebar-layout:(
columns: 10,
gutter: 20px
);
$list-layout: (
columns: 6,
gutter: 10px
);
/*使用网格*/
.sidebar-layout{
@include grid-container;
}
.sidebar-layout__sidebar{
@include grid-column(2,$sidebar-layout);
}
.sidebar-layout__content{
@include grid-column(8,$sidebar-layout);
}
.list-layout{
@include grid-container;
@include grid-collapse($list-layout);
}
.list-item{
@include grid-column(1, $list-layout);
}
? 访问http://coolor.co
Coolor.co其实并不是Bourbon
家族的成员,但你应该会喜欢它,这是一个免费的网站(移动端是收费的),在你指定一个主题色后,它会为你返回一组漂亮的包含5个颜色的配色方案,如果不满意直接一键切换就可以了,从此冒充设计师看谁还敢拦着你~
随着前端构建工具的兴起,CSS
的开发也进入了一个全新的阶段,自动化构建工具(例如webpack
)带来了新的开发方式,SASS
和BEM
的年代,还只能通过限制命名规则的方式来避免CSS冲突和相互覆盖。
CSS Modules
借助构建工具实现了真正的模块化,webpack4
中在css-loader配置项中就可以直接启用CSS模块化功能,使用起来非常方便。其原理就是通过构建工具将文件中的类名直接替换为Hash来实现。
Styled Components
,实际上就是炒的火热的CSS-In-Js的一种实现。新事物总是褒贬不一的,有人说它是大势所趋,也有人说它很难用,笔者的建议是:继续观望。Styled Components
概念的兴起很有可能是React
团队的炒作行为,JSX
已经将HTML
和JS
代码放在一起编写,使用起来感觉还不错,如果又加上CSS-In-JS
, 那么相当于使用JSX
同时编写HTML+CSS+JS,你说这种鼓吹没有私心谁信?以前使用<script>
和<style>
标签把代码都写在<html>
中,你们叫嚣着"结构,样式,行为三者分离",现在大伙把代码分离了,你们又忽悠着大家把结构样式行为混在一起写到JSX
里去,细思极恐。
上图只是形象地描述了CSS
技术的进化方向,并不代表后出现的就一定更好。如果在你的项目组里通过命名规则约定就可以避免冲突,那真的没必要为了炫技或者赶潮流就去把代码全部改成CSS Modules
或者 Styled Components
的方式。
工具是为了让工作变得更轻松,而不是变得更复杂。
标签:ble 配色方案 常用工具 20px 分享图片 .com 变暗 功能 特定
原文地址:https://www.cnblogs.com/dashnowords/p/9460722.html