html如何调用sass,如何使用Sass和SMACSS维护CSS
我们一直以来都是SMACSS的忠实粉丝,然而一个纯SMACSS方法最适合于一个全新的项目中的普通CSS。我们的市场网站,我们使用了Sass编写样式,而且里面还有好几年的CSS遗留物。
我们最近在精减我们的CSS,让我们的团队更方便的维护,而在精减过程中,我们团队并没有扔掉我们现有的样式或者从零开始。
我们基于SMACSS方法着手解决SMACSS和OOCSS的问题,但从BEM和Toadstool我们也有一些修改和一些想法。
注意:你将需要对SMACSS有点了解,如果你不了解,可以点击这里。
SMACSS的呈现
SMACSS定义了五种样式类型:
Base (基本)
Layout(布局)
Module (模块)
State (状态)
Theme (皮肤)
我们的方法看起来像这样:
Base (基本)
Layout(布局)
Module(模块)
State(状态)
Theme(皮肤)
Base(基本)
在新项目中我们的基本样式仅仅使用了Normalize,用来重置元素的基本样式(颜色、排版、外距和内距等)。
不幸的是,在线上的基本CSS来自一个时间相当久的CSS重置,里面有一些默认字体样式几乎都覆盖了。多年来,这些样式都放置在顶部,难以改变不影响其他所有的样式。
即使有这些缺点,我们仍然可以修改我们的基本样式,就像SMACSS的基本样式。
Layout(布局)
在我们的方法中不是基本样式和全局的类名而是模块。
SAMCSS规划了主要布局组件(如,页头header,侧栏sidebar,网格grid等等)和其他的一切。我们发现这种区别有几个不必要的因素:
模块通常用展示他们的子组件,同样的方式主要的组件展示在页面上。
即使我们100%确定组件将永过不会被重用,因此和可重用的组件相比没有任何好处。
布局和模块之间的界线太模糊了,布局做为一种特殊的类别保留下来是很价值的。
Module(模块)
模块是独立的,可重用的组件,哪怕是不知道它们的父容器。他们唯一的依赖关系是应用基本样式。当它不在需要时,我们可以安全的删除模块,而不什么影响我们的CSS。
BEM双下划线语法用于一个模块的子组件范围中,我们使用CSS子选择器随意适合深度的适用性。
BEM双连字符语法作为修饰符来表示子类,或和关键字is-、模块的具体状态相结合。
因为设置模块的宽度width,定位position,外距margin都需要上下文出现的相关因素,我们的模块要么是全屏的块元素要么是内联元素。
这里有一个示例(modules/_my_module.scss):
.my-module {
background-color: maroon;
position: relative;
> a {
color: aqua;
}
}
.my-module--important {
@extend .my-module;
border: 3px solid fuchsia;
}
.my-module--is-active {
background-color:red;
}
.my-module__close-button {
position: absolute;
right: 0;
top: 0;
}
当我第一次开始写模块就像这样,我最终使用很复杂的类来定义模块的名字:.my-module__child-component__grandchild-component--modifier。
但除了position和尺寸相关属性外,大多数子组件可以提取出自己独立的模块。所以如果你离开定位到父元素,我们可以设置为三个小的、独立的模块。
modules/_my_module.scss:
.my-module {
//...
}
.my-module__child-component {
width: 100px;
}
modules/_child_component.scss:
.child-component {
//...
}
.child-component__grandchild-component {
position: absolute;
top: 10px;
}
modules/_grandchild-component.scss:
.grandchild-component {
//...
}
.grandchild-component--modifier {
//...
}
example.html:
.grandchild-component和.child-component独立于他们的父容器。这个模块是用于他的子容器定位。这样做好处是嵌套的UI组件彼此完全脱离。
State(状态)
模块的具体状态作为模块的本身被定义在相同的文件中(如上面的.my-module--is-active),但我们要保持全局状态类的分离,如.is-hidden。
Theme(皮肤)
我们为各个模板市场写theme(如ThemeForest和GraphicRiver制作各作皮肤),但我们通过在一个配置文件中设置变量的设置来实现站点的特定风格。
Sass将一切整合
Configuration(配置)
application.scss第一个导入的样式文件就是_config.scss。在这里,我们设置了全局变量,共同使用。这里包括颜色、字体大小、字体、响应式断点等等。
我们还包括市场特定的配置文件,用来设置为每个市场的配色文案的变量。
Mixins(混合)
所有的Mixin保存在自己的文件中并放置在一个叫mixins的目录中,和全局都可以使用。我们也导入了处理浏览器供应商前缀的Mixin库,如Compass的Sprites图和供应商前缀。
Grid(网格)
我们的网格框架只是一个模块。
我们避开在HTML中使用类似于span-5这样的网格类名,相反使用Susy这种基于列宽而又独立于模块的类名。
modules/_page.scss:
.page {
//...
}
.page__sidebar {
@include span-columns(3,12);
}
.page__content {
@include span-columns(9 omega,12);
}
在模块中.grid只是包含所有东西,他只是Susy网格容器。
Internet Explorer
我们仍然支持IE7和IE8。我们过去使用HTML5 Boilerplate方法来处理那些浏览器兼容,但这意味着我们要使用很多.lt-ie8这样的类名来处理兼容。
现在我们使用这样的技巧来为那些浏览器生成独立的application-ie8.css和application-ie7.css样式。
IE指定的样式就写在模块中。
modules/_my_module.scss:
.my-module {
color: chartreuse;
@if $ie7 {
position: relative;
zoom:1;
}
}
给好的浏览器提供了一个简洁的application.css,里面没用任何IE垃圾代码,相反老IE用户会得到他们自己的特殊版本。
我们不能做什么
我们不追求可读的CSS输出。当你像这样写模块,可以查看类名和直接选择正确的Sass文件而不是通过开发者工具试图找出一个特定的样式。Source Maps也一样。
我们不打算从我们编译的CSS中删除每一个重复点。我们想要开发尽可能的容易,而又不影响性能。到目前为止用mixins模块代替@extend,这样并不会增加原始文件大小。
结论
开始几个月,我们将模块的文件放到有点乱的stylesheets目录。当我们添加新的特性和转换现有的特性,我们的modules目录下的样式文件只增不减。
来自ThemeForest的主要样式文件application.scss,现在看起来像这样:
// Config
@import config_global;
@import config_themeforest;
// Vendor mixin libraries
@import compass;
@import susy;
// Our mixins
@import mixins/**/*;
// Old crud. Our base styles, plus everything else that will eventually
// be converted into modules.
@import old_stuff/**/*;
// Modules
@import modules/**/*;
// Global state classes
@import state;
我们可以成功的实现现代化的CSS架构,而没有仍掉我们现有的样式或从零开始。
扩展阅读
对于这个方法,样式主要参考于starter项目,尝试一下,让我们知道您的想法
如果你从未了解过SMACSS,你可以到smacss.com了解更多的相关介绍
Harry Roberts有一系列文章关于介绍可伸缩的CSS。从BEM语法介绍开始和工作方式介绍
Nicolas Gallagher在这个方面也有很多优秀的分享,关于HTML语义和前端架构一文就是一个很好的思想概述,让我们受益不浅。
译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!
如需转载烦请注明出处:
html如何调用sass,如何使用Sass和SMACSS维护CSS相关推荐
- Sass函数:Sass Maps的函数-map-has-key($map,$key)
map-has-key($map,$key) 函数将返回一个布尔值.当 $map 中有这个 $key,则函数返回 true,否则返回 false. 前面的示例,当 $key 不在 $map 中时,使用 ...
- sass笔记-1|Sass是如何帮你又快又好地搞定CSS的
Sass学习笔记持续整理中,开篇不讲怎么安装,sass是什么,这些搜索引擎会告诉你,我们从sass的作用开始讲起,知道sass用来干什么,有什么作用,我们才能相信用sass的好处,并且时时刻刻想着sa ...
- webpack配置:less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件...
一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...
- Dart Sass替换Node Sass
需求:项目重构,需要一套前端基础模板 想法:用vue-element-admin(我之前基于它做过一套基础架构) 按照正常流程npm install时出现问题,命令行直接报错: ... gyp ver ...
- vs code使用Easy Sass插件编译sass文件路径报错问题解决
问题: scss文件中使用了@import来引入另一个scss文件,两个scss文件不在同一层级,所以我使用相对路径的写法来引用文件,但是使用vs code里面安装的扩展Easy Sass进行编译时, ...
- sass教程之--sass的安装
Sass 安装 本章节我们主要介绍 Sass 的安装与使用. NPM 安装 我们可以使用 npm(NPM 使用介绍)来安装 Sass. npm install -g sass 注:国内 npm 建议使 ...
- sass教程之--sass变量
Sass 变量 变量用于存储一些信息,它可以重复使用. Sass 变量可以存储以下信息: 字符串 数字 颜色值 布尔值 列表 null 值 Sass 变量使用 $ 符号: $variablename: ...
- jquery ajax php中 css样式不显示,Chrome浏览器在Ajax同步调用之前不会显示Jquery的动态css Propery更改...
我有如下因素HTML节点: 上的click事件会触发聊天对象的方法 this.addUser = function(trigger_node, id, is_silent, session, show ...
- Grunt教程——安装Grunt
Grunt教程--安装Grunt 作者:大漠 日期:2013-11-04 点击:3124 tools grunt 在上一节<Grunt教程--初涉Grunt>一文中介绍了Grunt是什么, ...
- Sass (Syntactically Awesome StyleSheets)
Sass (Syntactically Awesome StyleSheets) Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多 ...
最新文章
- Vue 实现的音乐项目 music app 知识点总结分享
- 他花了一个月,使用MicroPython将自己装进OLED里面
- Java面试题库,mysql远程访问权限设置
- ITK:将图像投射为另一种类型
- matlab写字,Matlab实现鼠标写字代码
- Java EE重命名为Jakarta EE:Java EE Guardians与Oracle的分歧
- 为什么很多国产手机模仿苹果手机的设计,唯独home键没人模仿?
- Google maps API开发(一)(转)
- Min_25筛(LibreOJ #6053: 简单的函数)
- 运行出现Server Tomcat v8.5 Server at localhost failed to start.和A child container failed during start...
- 【第2篇】人工智能(AI)语音测试原理和实践
- 【仪器常用操作方法】33500B函数发生器常用操作方法
- thingjs这个3D js库怎么样?
- 数据集-知识图谱:FreeBase(通用知识图谱)【英文】
- 视频转mp3格式转换器怎么使用
- JAVA_SSM装饰装修公司管理系统(含论文)毕业设计【演示视频】
- web网页设计实例作业 ——电影泰坦尼克号(4页) HTML+CSS+JavaScript 学生HTML个人网页作业作品下载 个人网页设计制作 大学生个人网站作业模板 简单个人网页制作
- XTransfer技术专家康康:从普通程序员到架构师的进化之路
- Java中csv文件读写分析
- 基于微软平台IIS/ASP.NET开发的大型网站有哪些?
热门文章
- 用户账户控制里面你要允许以下程序对此计算机更改吗无法点击是,收到“你要允许以下程序对此计算机进行更改吗”这样的提示该怎么办...
- 【冬瓜哥科普】生物大分子是如何“计算”的
- 用c语言实现在带头结点的单链线性表l中的第i个位置之后插入元素e,(1)线性表...
- PERC5/6 RAID如何配置?整合
- Windows电脑开机显示“初始化socket失败怎么办”
- 山西计算机网络技术专升本分数线_计算机网络技术专业专升本分数线
- Training Contest 5 - J - Jurassic Jigsaw
- BOS项目练习(业务受理功能,快速录入工作单{datagrid数据表格编辑功能使用})
- 【Maven】解决maven打jar包报错 source 1.3 中不支持注释 (请使用 -sour
- Java 数据输入输出流 内存操作流 打印流