摘要:如果我们使用的话,就可以这么写我们要修改主色,只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到,生成的中并没有任何的变化,那这个做了什么呢其实在通过引用的对象内发生了变化。
作为一个前端,毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言,没有编程语言的诸多特性,比如变量定义,复用,嵌套等,所以相应的开发效率也受到限制。Less
在追求效率和自动化的当下,涌现了一批解决方案,像是css预编译语言Less, Sass等,解决css命名冲突的css-modules,react中css的最佳实践styled-components等。本篇文章不在于探讨css的技巧学习,而在于讨论css的这些提升开发效率的方案。
Less, Sass, Stylus等 css预编译语言,给css赋予了编程特性。拿 Less 来说,它扩展了 CSS 语言,增加了变量、Extend、Mixin、函数等特性,也支持import导入文件,使 CSS 更易维护和扩展。本篇简单介绍一下Less的一些特性,详细的教程可以上Less官网查看。
怎么样使用Less?我们可以在 命令行 直接使用less,也可以通过 node api 去使用less,或者通过 webpack,gulp,grunt等的 less插件 去使用,甚至可以在浏览器端使用,非常灵活。这里简单说一下在命令行中使用less。
$ npm i less -g # 当less被安装之后,就可以使用全局命令lessc $ lessc bootstrap.less bootstrap.css一、变量
变量使css代码更易维护。
比如有个主色 #ef8376,在整个样式表中,我们有多处使用这个颜色。如果主色变动的话,比如主色要变成 #000,我们就要手动去全局替换这个变量,而有一些 #ef8376我们却不希望替换掉,这样就造成了极大的困扰。
如果我们使用less的话,就可以这么写:
@primaryColor: #ef8376; .banner { background-color: @primaryColor; .text { color: @primaryColor; border-color: #ef8376; } }
我们要修改主色,只需要将 @primaryColor 修改为 "#000"即可。
二、ExtendExtend让我们可以用伪类的写法去合并一些类。
比如:
nav ul { &:extend(.inline); background: blue; } .inline { color: red; }
会编译成:
nav ul { background: blue; } .inline, nav ul { color: red; }三、Mixin
Mixin既有Extend继承已有类的特性,也有其他高级的特性,比如支持变量,支持像使用方法一样使用mixin
支持变量
.foo (@bg, @color: "#000") { background: @bg; color: @color; } .unimportant { .foo(#f5f5f5); } .important { .foo(#121212) !important; }
会编译成:
.unimportant { background: #f5f5f5; color: #000; } .important { background: #121212 !important; color: #000 !important; }
像方法一样使用Mixin
.count(@x, @y) { @margin: ((@x + @y) / 2); @padding: ((@x + @y) / 4) } div { margin: .count(16px, 16px)[@margin]; padding: .count(16px, 16px)[@padding]; } .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } .text { .loop(5); // launch the loop }
会编译成:
div { margin: 16px; padding: 8px; } .text { width: 10px; width: 20px; width: 30px; width: 40px; width: 50px; }四、Import导入文件
// head.less .banner { background-color: red; }
// footer.css .footer { background-color: green; }
@import "./head.less"; @import css "./footer.css";
会编译成:
.banner { background-color: red; } .footer { background-color: green; }五、方法
Less支持一些常用的辅助方法
比如darken和lighten用来加深或淡化颜色。
body { background-color: darken(hsl(90, 80%, 50%), 20%); color: lighten(hsl(90, 80%, 50%), 20%); }
会编译成:
body { background-color: #4d8a0f; color: #b3f075; }css-modules
css-modules 相较于 Less 来说有所不同,css-modules 只是拓展了 css 的写法,解决了css的块作用域和全局作用域,而不是将css变成一门编程语言。
为什么需要 css-modules?Css一直以来都有一个问题,就是css定义的类都是全局的,我们虽然可以通过不同的命名空间或是加前缀的方式去避免类的混淆和冲突,但是在写法上却不是那么的干净利落,而且一旦重构css的话,也会造成很大的困扰。
为了让我们能随意的写类名而不需要考虑冲突或是覆盖,css-modules 便出现了。
css-modules提供了 块作用域 :local 和 全局作用域 :global,这两个特性就能很好的避免css的命名冲突。
怎么使用?首先来说一下怎么使用 css-modules。
当我们在使用webpack的时候,最简单的用法是通过 css-loader 来开启对 css-modules 的支持。如下:
{ test: /.css$/, use: [ { loader: "css-loader", options: { modules: true, // 开启对css-modules的支持 localIdentName: "[name]__[local]___[hash:base64:5]" // 生成的类名的格式 } } ] }
同时可以配合less-loader 和 postcss使用。注意:在结合less-loader的时候可能出现对url的兼容问题。见:https://github.com/webpack-co... 。而且 less-loader 的维护者认为结合 less-loader 和 css-modules没什么必要。。
css-loader - webpack开启css modules
postcss-modules - postcss的 css-modules 插件
一、作用域css-modules提供了两个关键字,:local 和 :global。
比如这种写法:
// App.css :local(.banner) { background: red; } :local(.banner .text) { color: yellow; } .center { color: green; } :global(.global-class-name) { color: blue; }
会编译成:
.App__banner___3NbRo { background: red; } .App__banner___3NbRo .App__text___2j1Ht { color: yellow; } .App__center___3eDJo { background: green; } .global-class-name { color: blue; }
:global 声明的类不会被编译,会保持不变。
同时,我们在js中引入css,写法如下:
/** * styles是什么呢?styles其实是一个经过处理过的类名的集合。 * * 比如上边这个css文件,处理后的style对象是这样的: * * { * banner: "App__banner___3NbRo", * text: "App__banner___3NbRo App__text___2j1Ht", * center: "App__center___3eDJo" * } * * 这样我们就可以理解为什么css-modules可以避免明明冲突了。 * 命名都按照我们设置的hash规则重写了,保证了类名的唯一,并且在生成的html结构里也进行了替换,还何来冲突? */ import styles from "./App.css"; import React from "react"; const html = () => { return二、Composition - 混合组成 ; }; export default html;
css-modules支持多个类的混合组成。比如:
.colorRed { color: red } .text { composes: colorRed; background: #000; }
会编译成:
.App__colorRed___yoG_f { color: red } .App__text___2j1Ht { background: #000; }
可以看到,生成的css中并没有任何的变化,那这个composes做了什么呢?其实在通过js引用的对象内发生了变化。如下:
{ "colorRed": "App__colorRed___yoG_f", "text": "App__text___2j1Ht App__colorRed___yoG_f" }
那么在通过 styles.text 使用 text 类的时候,其实也同时使用了 colorRed 类,达到了混合组成的效果。
三、Import - 引用css-modules 支持引用其他文件的类。
比如:
// green.css .green { color: green; }
// text.css .text { background-color: red; composes: green from "./green.css"; }
会编译成:
.green__green___1v20L { color: green; } .text__text__2jfs0 { background-color: red; }
其实跟 二 一样,生成的css并没有什么改动,其实改变的是生成js对象的内容:
import styles from "./text.css"; // styles = {green: "green__green___1v20L", text: "text__text__2jfs0 green__green___1v20L"}styled-components
styled-components, 可能是React中css的最佳实践了,如果你喜欢,你也可以叫它styled-react-components : )。想象一下,像写react组件一样去写css,是一种什么样的体验?
如下,你可以这样来写样式:
import React from "react"; import styled from "styled-components"; const Title = styled.h1` font-size: 1.5em; text-align: center; color: palevioletred; `; const Wrapper = styled.section` padding: 4em; background: papayawhip; `; export default () =>; Hello World, this is my first styled component!
styled-components会自动帮你在 运行时 生成一个样式表,插入到 下的 标签中,比如上边的代码,会在运行是生成如下代码:
Hello World, this is my first styled component!
我们可以看到,我们在js中写的样式,被插入到了 中,并且生成了一个随机的类名,而且这个类名,也是被 react-dom 生成的DOM结构所引用。
受益于 styled-components,我们贯彻了 react 的 万物皆组件 的思想,使我们在css的组件化上又推进了一步(发布一个纯css组件试试?) : )
在这篇文章里,我会简单探讨一下 style-components 的用法和特性。
如何使用?styled-components 一般配合着 react 使用,当然也支持 vue (vue-styled-components)。抛开这两个来说,你也可以直接在原生js下使用:
我们这里讲配合 react 的用法。
一、首先,安装依赖
$ npm i styled-components # 配合着babel来使用 $ npm i -D babel-plugin-styled-components
二、配置 .babelrc (当然,我们需要安装 webpack ,配置webpack的config,并且需要需要安装 babel-preset-env 和 babel-preset-react,这里不赘述)
{ "presets": ["env", "react"], "plugins": ["styled-components"] }
经过以上简单的配置之后,就可以在项目中使用 styled-components 了。
工具当然,现在的 styled-components 也是支持了 stylelint 和 jest,所以,你也不用担心样式检查和测试了 :)
下边儿说一下 styled-components 的一些用法和特性。 官方文档在这儿: https://www.styled-components...
一、动态样式赋值你可以传props给组件,让组件根据所传的props的值动态改变样式。
const Button = styled.button` /* 根据props的值动态改变样式的值 */ background: ${props => props.primary ? "palevioletred" : "white"}; color: ${props => props.primary ? "white" : "palevioletred"}; `; render(二、样式继承);
const Button = styled.button` color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // 创建一个新Button组件,继承自Button,并对Button进行样式添加和覆盖 const TomatoButton = styled(Button)` color: tomato; border-color: tomato; `; render(三、组件标签替换);Tomato Button
比如,你创建了一个Button组件,你想把button标签变成a标签,但是样式还是button的样式。那么你可以通过 withComponent 方法轻松做到。
const Button = styled.button` display: inline-block; color: palevioletred; font-size: 1em; margin: 1em; padding: 0.25em 1em; border: 2px solid palevioletred; border-radius: 3px; `; // 把四、动画
// 这个keyframe会随机生成一个name const rotate360 = keyframes` from { transform: rotate(0deg); } to { transform: rotate(360deg); } `; const Rotate = styled.div` display: inline-block; animation: ${rotate360} 2s linear infinite; padding: 2rem 1rem; font-size: 1.2rem; `; render(<
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97192.html
摘要:之前张鑫旭博客写的效果讲解得不错啊,既然是大神,应该能搜出点什么,结果一搜,还真有。参考感谢张鑫旭这篇文章好吧,变换,不过如此还有一篇写得不错的,帮助理解和属性最后引用张鑫旭的一句话纯粹从网上些效果代码,那永远就是的命咯 起因 昨晚在做慕课网的十天精通CSS3课程,其中的综合练习是要做一个3D导航翻转的效果。非常高大上。 以往这些效果我都很不屑,觉得网上一大堆这些特效的代码,复制粘贴就...
摘要:踩坑入门系列一二添加三目录重构再谈路由陆续更新个人对于脚手架的有一种执念,如果搭建出来就是一个首页标签跳转,实在不是我这个处女座的风格,因此第二步我就想引用框架,相信很多使用的开发者用的也都是这个框架吧。 Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 陆续更新... 个人对于脚手架的UI有一种执...
摘要:如果我们使用的话,就可以这么写我们要修改主色,只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到,生成的中并没有任何的变化,那这个做了什么呢其实在通过引用的对象内发生了变化。 作为一个前端,毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言,没有编程语言的诸多特性,比如变量定义,复用,嵌套等,所以相应的开发效率也受到限制。在追求效率和自动化的当下...
摘要:如果我们使用的话,就可以这么写我们要修改主色,只需要将修改为即可。二让我们可以用伪类的写法去合并一些类。比如会编译成可以看到,生成的中并没有任何的变化,那这个做了什么呢其实在通过引用的对象内发生了变化。 作为一个前端,毫无疑问css肯定是最基础的一项技能之一。css是一个标记语言,没有编程语言的诸多特性,比如变量定义,复用,嵌套等,所以相应的开发效率也受到限制。在追求效率和自动化的当下...
摘要:在的发展过程中,是最早与之父合作的人之一。问您认为中国的开发者虽然起步晚,但是现在已经赶上了是的。但是我知道,它们只是进化的一部分。第一个最主要的原因就是要保护。 非商业转载请注明作译者、出处,并保留本文的原始链接:http://www.ituring.com.cn/article/194473 Bert Bos是一位计算机科学家,他也是CSS的创始人之一。在CSS的发展过程...
阅读 1445·2023-04-26 00:25
阅读 874·2021-09-27 13:36
阅读 900·2019-08-30 14:14
阅读 2141·2019-08-29 17:10
阅读 983·2019-08-29 15:09
阅读 1925·2019-08-28 18:21
阅读 935·2019-08-26 13:27
阅读 945·2019-08-26 10:58