CSS预处理技术现在已经非常成熟,比较流行的有Less,Sass,Stylus,在开发过程中提升我们的工作效率,缩短开发时间,方便管理和维护代码,可以根据自己的喜好选择一款自己喜欢的工具开发,使用很接近,差别很小,语法类似。再选择一款编译工具koala,国产工具,koala是一个前端预处理器语言图形编译工具,支持Less、Sass、Compass、CoffeeScript,帮助web开发者更高效地使用它们进行开发。跨平台运行,完美兼容windows、linux、mac。还可以在node.js里编译。我使用的是SASS,使用SASS+Compass完胜LESS。
常用CSS预定义:
1:ellipsis,省略号,当超过宽度时,显示省略号:
@mixin ell() { overflow: hidden; -ms-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }
2:display:inline-block;IE6,7块级元素对inline-block支持不好,需要触发Layout;内联元素就不需要了。
@mixin dib() { display: inline-block; *display: inline; *zoom: 1; }
3:清除浮动,貌似最完美的解决方案
/* clearfix */ @mixin clearfix { &:after { clear: both; content: '.'; display: block; height: 0; line-height: 0; overflow: hidden; } *height: 1%; }
4:最小高度,IE6不支持min-height,但是使用height能达到一样的效果
/* minheight */ @mixin minHeight($min-height) { min-height: $min-height; height: auto !important; height: $min-height; }
5:使用纯CSS现实三角形,兼容所有浏览器;使用了三个参数,第一个是"方向",第二个是"大小",第三个是"颜色",省得每次都写一大堆代码,非常方便啦;
/* 箭头 arrow(direction, size, color); */ @mixin arrow($direction, $size, $color) { width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: $size; cursor: pointer; @if $direction == top { border-style: dashed dashed solid dashed; border-color: transparent transparent $color transparent; border-top: none; } @else if $direction == bottom { border-style: solid dashed dashed dashed; border-color: $color transparent transparent transparent; border-bottom: none; } @else if $direction == right { border-style: dashed dashed dashed solid; border-color: transparent transparent transparent $color; border-right: none; } @else if $direction == left { border-style: dashed solid dashed dashed; border-color: transparent $color transparent transparent; border-left: none; } }
使用实例:
test.scss
.arrow{ @include arrow(bottom,10px,#F00);//向下,10px大小,红色箭头,立马出现 使用@include导入 }
编译结果:
.arrow { width: 0; height: 0; line-height: 0; font-size: 0; overflow: hidden; border-width: 10px; cursor: pointer; border-style: solid dashed dashed dashed; border-color: red transparent transparent transparent; border-bottom: none; }
相关推荐
Sass是一种强大的css扩展语言(css本身并不是一门语言),它允许你使用变量、嵌套规则、mixins、导入等css没有但开发语言(如Java、C#、Ruby等)有的一些特性,并且完全兼容CSS语法。Sass有助于保持大型样式表结构...
主要介绍了详解如何在微信小程序中愉快地使用sass,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
3.4_在uni-app中如何使用sass|uni-app_基础配置|uni-app_&_uniCloud_从零入门开发《IT技
sass相关依赖包,下载之后,直接放在node_modules中即可使用,主要为了解决sass依赖包下载失败的问题
flexbox 布局神器,使用 SASS 语法编写,使用 gulp 前端打包工具进行打包
【用于解决 failed Error: not found: python2 node-sass】 报错信息如下: ``` npm WARN prefer global node-gyp@3.6.0 should be installed with -g > node-sass@4.5.2 install E:\workspace_vscode\ww\node...
直接下载node-sass和sass-loader下载,然后拷贝到node-modules下即可,再次npm install就不会报错了
sass-rails, Sass的Ruby on Rails 样式表引擎 与Sass的官方Ruby-on-Rails集成这个 gem 使用Sass样式表语言为 Ruby on Rails 项目提供正式的集成。安装从 Rails 3.1开始,新的Rails 项目将被配置为使用 Sass 。 如果...
但是,QtCSS有一些变体,无法直接使用SASS编译器。 该工具的目的是通过处理这些变化来填补SASS和Qt-CSS之间的空白。 QtCSS特殊性 QtSASS的目标是能够基于100%有效的SASS文件生成Qt-CSS样式表。 这就是它处理Qt...
sass语法官方规范
使用设置您的React Native应用程序的样式。 在后台将Sass文件转换为(请参见示例)。 该转换器可以与一起使用。 它是如何工作的? 您的App.scss文件可能如下所示: %blue { color : blue ; } .myClass { @...
A reluctant convert to Sass, Dan Cederholm shares how he came around to the popular CSS pre-processor, and provides a clear-cut path to taking better control of your code (all the while working the ...
jacket, 带有Sass的条件样式适当地将你打扮为 CSS 夹克带有Sass的条件样式。 适当地打扮你的CSS 。Jacket是一个指南针组件,它基于你在样式表中设置的上下文变量打印或者隐藏样式。 编写和维护主样式表,然后输出...
materialize-sass, Rails 资产管道的Sass版本 实现了 sass-ruby-gem materialize-sass 是一款基于的Sass power版本,它是基于材料设计的现代反应性前端框架。示例:http://materialize.labs.my/源:https://gi
使用sass可以使我们的样式代码变的更简洁,更具有易读性 首先,我们创建完vue项目之后 尝试在项目中使用sass语法 运行后发现果不其然报错了 在使用scss之前,我们首先需要安装相关的插件 npm insta
此处的资源可以帮助我们完成sass系统中多租户实现功能,用以完成数据库的多数据源切换功能。
主要介绍了vue cli webpack中使用sass的方法,需要的朋友可以参考下
node-sass安装包
Sass和Compass 实战
Hyper – 可爱的sass框架