建个网站费用大概多少钱一年,建设一个网站用什么搭建,公司logo设计图片免费,上海电商网站建设费用原标题#xff1a;缩减 SCSS 50%样式代码的 14 条实战经验作者#xff1a;feishi123前言Sass是CSS3语言的扩展#xff0c;它能帮你更省事地写出更好的样式表#xff0c;使你摆脱重复劳动#xff0c;使工作更有创造性。因为你能更快地拥抱变化#xff0c;你也将敢于在设计…原标题缩减 SCSS 50%样式代码的 14 条实战经验作者feishi123前言Sass是CSS3语言的扩展它能帮你更省事地写出更好的样式表使你摆脱重复劳动使工作更有创造性。因为你能更快地拥抱变化你也将敢于在设计上创新。你写出的样式表能够自如地应对修改颜色或修改HTML标签并编译出标准的CSS代码用于各种生产环境。Sass语法比较简单难点在于如何将Sass运用到实际项目中解决CSS存在的痛点从而提高我们效率。经过实际项目的摸索总结了以下14条实践经验进行分享希望能帮助大家扩宽思维更好地将Sass运用到实际项目中。在项目中我们使用支持传统的类CSS语法—— Scss 所以以下项目经验总结分享以 Scss为例。1、变量 $ 使用我们可以通过变量来复用属性值比如颜色、边框大小、图片路径等这样可以做到更改一处从而进行全局更改从而实现“换肤”的功能。实例1我们的组件库利用变量配置进行统一更改组件的颜色、字体大小等(换肤)$color-primary: #3ecacb;$color-success: #4fc48d;$color-warning: #f3d93f;$color-danger: #f6588e;$color-info: #27c6fa;实例2图片的配置及全局引入Scss中图片的使用可能存在以下2个问题(1)如果样式文件和使用该样式文件的vue文件不在同一目录会出现图片找不到(2)如果将图片路径配置变量写在vue文件的style中但是该写法导致图片和样式分离我们可以采用将图片路径写成配置文件然后进行全局引入这样可以统一更改图片路径(并且该方法只会在使用相应图片时进行加载不会导致额外性能问题)$common-path: ./primary/assets/img/; $icon-see: $common-path ; $icon-play: $common-path ; $icon-comment: $common-path ; $icon-checkbox: $common-path ; 2、import 导入Scss文件(1)Css中的import规则它允许在一个css文件中导入其他css文件。然而后果是只有执行到import时浏览器才会去下载其他css文件这导致页面加载起来特别慢。(2)Scss中的import规则不同的是scss的import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中而无需发起额外的下载请求。实例1组件库中统一将组件的样式文件import 进 中 然后如果项目中有使用组件库的地方只需要在项目的入口处引入 文件如下所示在文件中引入各组件的样式文件import ./; import ./; import ./; 3、局部文件命名的使用scss局部文件的文件名以下划线开头。这样scss就不会在编译时单独编译这个文件输出css而只把这个文件用作导入。在使用scss时混合器mixins是最适合的使用场景因为混合器不需要单独编译输出css文件。实例1将混合器的名称写成局部文件命名的方式如下图所示img4、Scss的嵌套功能和父选择器标识符我们可以使用嵌套功能和父选择器标识符 来缩减重复的代码特别如果你CSS类采用BEM命名规范样式类命名存在冗长的问题。使用此功能能解决BEM命名冗长的问题且样式可读性更高。实例1嵌套功能和父选择器标识符 解决BEM冗长问题.tea-assignhw { __top { margin: 0; } __content { padding-left: 45px; } __gradeselect { width: 158px; } } **实例2**嵌套中使用子选择器、兄弟选择器和伪类选择器(1)子选择器__hint { margin: 20px; font-size: 14px; p:first-child { font-weight: bold; } } (2)兄弟选择器__input { width: 220px; span { margin-left: 10px; } } (3)伪类选择器__browse { background: url( $btn-search) no-repeat; :hover { background: url( $btn-search) -80px 0 no-repeat; } :visited { background: url( $btn-search) -160px 0 no-repeat; } } 5、mixin 混合器和 extend 指令的使用变量使你能够复用属性值但如果想要复用一大段规则呢传统的做法是如果在样式表中发现重复就会把公共的规则抽离出来放到新的CSS类中。在Scss中可以使用混合器mixin和extend继承指令来解决以上提到的复用一大段规则的场景。但两者的使用场景又有啥区别呢(1)mixin主要的优势就是它能够接受参数。如果想传递参数你会很自然地选择mixin而不是extend因为extend不能够接受参数(2)因为混合器规则都混入到其他类中所以在输出的样式表中不能完全避免重复。选择器继承的意思就是让一个选择器能够复用另一个选择器的所有样式但又不重复输出这些样式属性即使用extend产生 DRY CSS风格的代码(Dont repeat yourself)综上所述如果你需要传参数只能使用mixin混合器否则用extend继承来实现更优。实例1mixin混合器的使用mixin paneactive( $image, $level, $vertical) { background: url( $image) no-repeat $level$vertical; height: 100px; width: 30px; position: relative; top: 50%; } --left-active { include paneactive( $btn-flip, 0, 0); } --right-active { include paneactive( $btn-flip, 0, -105px); } 实例2extend继承的使用.common-mod { height: 250px; width: 50%; background-color: #fff; text-align: center; } -mod { extend .common-mod; float: right; } -mod2 { extend .common-mod; } 6、mixin 混合器默认参数值的使用在include混合器时不必传入所有的参数我们可以给参数指定一个默认值如果所需要传的参数是 默认值则include时可以省略该参数如果所需要传的参数不是默认值则include时则传入新的参数。实例1mixin混合器默认参数值的使用mixin pane( $dir: left) { width: 35px; display: block; float: $dir; background-color: #f1f1f1;} __paneleft { include pane; } __paneright { include pane(right); } 7、#{} 插值的使用通过 #{} 插值语句可以在选择器或属性名中使用变量。当有两个页面的样式类似时我们会将类似的样式抽取成页面混合器但两个不同的页面样式的命名名称根据BEM命名规范不能一样这时我们可使用插值进行动态命名。实例1页面级混合器中的类名利用#{}插值进行动态设置mixin home-content( $class) { . #{$class} { position: relative; background-color: #fff; overflow-x: hidden; overflow-y: hidden; --left { margin-left: 160px; } --noleft { margin-left: 0; } } } 8、运算的使用Sass支持数字的加减乘除、取整等运算 (, -, *, /, %)实例1input组件根据输入框的高度设置左右内边距如下所示.ps-input { display: block; __inner { -webkit-appearance: none; padding-left: #{$--input-height 10}; padding-right: #{$--input-height 10}; } } 9、相关scss自带函数的应用scss自带一些函数例如hsl、mix函数等。**实例1button组件的点击后颜色是将几种颜色根据一定的比例混合在一起生成另一种颜色。**如下所示:focus { color: mix($--color-white, $--color-primary, $--button-hover-tint-percent); border-color: transparent; background-color: transparent;} :active { color: mix($--color-black, $--color-primary, $--button-active-shade-percent); border-color: transparent; background-color: transparent; } 10、相关scss自带函数的应用for指令可以在限制的范围内重复输出样式每次按变量的值对输出结果进行变动。实例1例如项目中需要设置hwicon类底下第2到8个div子节点需设置样式如下所示 for$ifrom 2 through 8 { .com-hwicon { div:nth-child( #{$i}) { position: relative; float: right; } } } 11、each遍历、map数据类型、mixin/include混合器、#{}插值 结合使用可通过结合each遍历、map数据类型、mixin/include混合器、#{}插值从而生成不同的选择器类并且每个选择器类中的背景图片不同如下所示$img-list: ( (accessimg, $papers-access), (folderimg, $papers-folder), (bmpimg, $papers-bmp), (xlsimg, $papers-excel), (xlsximg, $papers-excel), (gifimg, $papers-gif), (jpgimg, $papers-jpg), (unknownimg, $papers-unknown) ); each $label, $valuein$img-list { .com-hwicon__ #{$label} {include commonImg( $value); } } 12、样式代码检查校验 —— stylelint 插件CSS不能算是严格意义的编程语言但是在前端体系中却不能小觑。CSS是以描述为主的样式表如果描述得混乱、没有规则对于其他开发者一定是一个定时炸弹特别是有强迫症的人群。CSS看似简单想要写出漂亮的 CSS还是相当困难。所以校验 CSS规则的行动迫在眉睫。stylelint是一个强大的现代 CSS检测器可以让开发者在样式表中遵循一致的约定和避免错误。**(1)需要安装gulp、stylelint、gulp-postscss 、 postcss-reporter、stylelint-config-standard**安装命令为npm install gulp stylelint gulp-postscss postcss-reporter stylelint-config-standard--save-dev (2)安装完成后会在项目根目录下创建文件文件配置为var reporter require( postcss-reporter); var stylelint require( stylelint); var stylelintConfig { extends: stylelint-config-standard, rules: { at-rule-no-unknown: [ true, { ignoreAtRules: [ extend, include, mixin, for] } ] } }; ( scss-lint, function{ var processors [ stylelint(stylelintConfig), reporter({ clearMessages: true, throwError: true}) ]; returngulp.src( [ src/style/*.scss]// 需要工具检查的scss文件 ).pipe(postcss(processors));}); ( default, [ scss-lint]); (3) stylelint-config-standard 检验规则stylelint-config-standard为stylelint官方推荐的标准校验规则具体校验规则有哪些内容可参照官网。(4)运行命令进行样式检查13、样式自动修复插件 —— stylefmt 插件stylefmt是一个基于 stylelint的代码修正工具它可以基于stylelint的代码规范约定配置对可修正的地方作格式化输出。(1)配置文件如下var stylefmt require( gulp-stylefmt); // css格式自动调整工具 ( stylefmt, function{ returngulp.src( [ src/style/student/// 需要工具检查的scss文件 ]).pipe(stylefmt(stylelintConfig)) .pipe(( src/style/dest/student));}); ( fix, [ stylefmt]); (2)运行命令进行样式修复如下图所示img14、将scss语法编译成css语法——gulp-sass 插件初写scss代码时由于对语法不熟悉等写出来的scss代码所得到的页面效果并不是我们想要的。这时我们可以使用gulp-sass插件来监听scss代码实时生成css代码从而可以通过查看css代码来判断所写的scss代码是否正确。(1)配置文件如下var gulpsass require( gulp-sass); ( gulpsass, function{ returngulp.src( src/style/components/) .pipe(( error, )) .pipe(( src/style/dest));}); ( watch, function{ ( src/style/components/, [ gulpsass]); });复制代码复制代码 (2)运行命令从而监听scss文件动态编译scss代码生成css代码文件如下图所示img以上就是总结的14条 SCSS 实战经验总结的分享。 返回搜狐查看更多责任编辑
