前言

写这个笔记的初衷是为了我未来工作的负荷不会太大，可以集中的去进行查找CSS样式，希望未来能我现在这个决定感到庆幸。

这是一段漫长的时间，目录什么的未来也是会做好规整的。

正文

一、新项目可以定义全局可以应用的函数，方便使用，举例的是background-images以及他一起的样式组合：

首先先定义一个全局的样式的文件夹“theme”，在其中创建一个命名为mixins的less文件。
我们的环境是umi框架，所以我们可以将webpack文件放到config这个文件或者.umirc.ts这个文件中，一般最好放到.umirc.ts中。
我们可以为“src/theme”路径在webpack文件中取个别名，那就在defineConfig({alias：{‘@@’：‘.’, '@theme':'@/theme'}})，这样我们的别名就命名好了。
想要将theme/mixins文件引用到全局，一个别名肯定是不够的，所以我们接下来继续defineConfig({alias：{‘@@’：‘.’, '@theme':'@/theme'},lessLoader:{modifyVars:{hack:'true; @import "~@theme/mixins";'},javascriptEnabled:true,}})，这样我们就将theme/mixins文件引用到全局了。

chainWebpack(config) { config.module .rule('images') .test(/\.(png|jpg|jpeg|gif|mp3|mp4|webm|otf)$/) .use('url-loader') config.module .rule('scss') .test(/\.less$/) .use('loader') .loader('style-resources-loader') .options({ patterns: ['./src/theme/test.less'], }) }, lessLoader: { modifyVars: { hack: 'true; @import "~@theme/mixins";', }, javascriptEnabled: true, }

test.less文件

.ccolor(@color) { color: @color; }

在mixins.less文件中进行@baseImg:'~@/图片公共路径相同文件夹'。
下面的代码就演示了如何在less文件夹下定义的全局样式，我们实际应用就可以进行.cover（‘home/i’）或者定义其他样式。

.cover(@src, @size: 100% 100%, @position: center center) { background-image: url('@{baseImg}/@{src}.png'); background-position: @position; background-repeat: no-repeat; background-size: @size; }

二、进行文字换行，并且可以对多行文字进行出现省略号效果：

.text-overflow (@width: 100%, @line: 1) when (@line > 1) { max-width: @width; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: @line; }

三、对input标签的文字样式的处理，我们都知道input标签的样式特殊性。

所以对待input文字的样式咱们可以常用常规的color属性，也可以常用-webkt-text-fill-color属性，而这个兼容性的属性的作用是干嘛的？
它的作用是当你有保存密码的快捷方式并且可以直接选择历史账号，选择好了账号，他默认的颜色为黑色，如果有特殊的需求时，我们就可以使用这个属性了。
他可以将黑色转成别的颜色，而color不能对他进行转换。
在input中还有placeholder这个属性他的默认颜色为黑色，我们一般对input设置color是对placeholder这个属性无效的，这个时候我们需要使用&::placeholder去找到属性再使用-webkt-text-fill-color属性定义它，具体代码如下：

input { -webkit-text-fill-color: #fff; width: 100%; height: 100%; &::placeholder { -webkit-text-fill-color: #878b9180; } }

四、我们一般的需求都是将ul、li、ol这三个标签进行list-style-type:none的，难免有特殊情况

下面就是全部属性

2. 但是我们要对标签的前缀做样式呢，我们可以对li标签设定content:'.'再改变颜色，如下：

& > li { content: '.'; color: #ce7ffe; list-style-type: disc; }

五、工作中我们会遇到许多文字上的样式，这次讲的就是对齐方式。

一般情况下我们对对齐方式的操作仅限于居中，左对齐，右对齐，还有一种对齐为两端对齐为justify。
但是justify实现的前提是要有参照物，当他为最后一排时他就无效了，我们为了对最后一行进行两端对齐可以进行的操作就是对他after或者before设立一个块，如下代码：

.we_chat { min-width: 48px; height: 25px; text-align: justify; &:after { content: ''; width: 100%; display: inline-block; height: 0; } }

六、待续...

你所不知道的CSS样式

前言

目录

正文