css预处理框架-stylus
@红@旗下的小兵
求知若渴 虚心若愚
展开
-
css预处理框架stylus——选择器
选择器:与python一样,stylus选择器与元素样式以缩进进行分割 ( 开发中为了阅读方便,建议属性和属性值以冒号分割 ).box color red<!-- 等同于 -->.box{ color:red;}规则:与css一样 , 定义多个选择器时可以使用逗号隔开,或者换行进行区分:.box,.box_1 color:red...原创 2019-09-27 12:17:08 · 405 阅读 · 0 评论 -
css预处理框架stylus——变量
在css中使用变量可以说极大提高了css代码的复用性、可维护性、灵活性!!1、变量:官方文档:我们可以把表达式指定为变量,然后在样式中使用(在实际开发中通常会把可复用的样式单独写在一个以点 . styl 的文件中,stylus变量通常前边加上$符,当然变量名是自定义的!)://指定变量,stylus中注释与js一样 使用//$color=blue$font-size=30px....原创 2019-09-27 14:33:11 · 1095 阅读 · 0 评论 -
css预处理框架stylus——@import 动态导入样式 和@media媒体查询
@import以在vue中使用stylus为例,创建一个以 .styl结尾的文件,当你需要用它的时候,要通过以下方式动态导入:<style lang="stylus" scoped>@import '相对路径/fileName.styl'··· ···</style>@import工作原理:遍历目录列队,并检查任意目录中是否有该文件。。。@...原创 2019-09-27 15:38:57 · 1246 阅读 · 0 评论 -
css预处理框架stylus——@keyframes 帧动画 和@font-face字体引入
@keyframes 帧动画与普通css一样.box width:100px height:100px background:#f40 animation:run 3s @keyframes run 0% width:100px 33% width:160px ...原创 2019-09-27 16:09:34 · 1303 阅读 · 2 评论