sass 的使用心得
//定义颜色
$c55:#;
$c22:#;
$c33:#;
$c99:#;
$c77:#;
$c00:#;
$cff:#fff;
$caa:#aaa;
$ccc:#ccc;
$cf0:#f0f0f0;
$cdd:#ddd;
$cee:#eee;
$cf9:#f9f9f9;
$cf7:#F7F7F7;
$cfa:#fafafa;
$cf60:#FF8225;
$c2a:#2a3542;
$c35:#35404d;
$c1d:#1DA1F2;
$cff0:#ff0000;
$c02:#02c12a;
$cf4:#f4f4f4;
$cbbe:#bbe3fb;
$cde :#dedede; // 背景图片地址和大小
@mixin bjs($url) {
background-image: url($url);
background-repeat: no-repeat;
background-size: 350px 250px;
}
//定义magin
@mixin setMargin($left, $right, $bottom,$top){
margin:$top $right $bottom $left;
}
//定义padding
@mixin setPadding($left, $right, $bottom,$top){
padding:$top $right $bottom $left;
}
//居中
@mixin jz {
position:absolute;
left:;
bottom:;
margin:;
padding:;
} //定义圆角
@mixin borderRadius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
//定位全屏
@mixin allcover{
position:absolute;
top:;
right:;
} //定位上下左右居中
@mixin center {
position: absolute;
top: %;
left: %;
transform: translate(-%, -%);
} //定位上下居中
@mixin ct {
position: absolute;
top: %;
transform: translateY(-%);
} //定位上下居中
@mixin cl {
position: absolute;
left: %;
transform: translateX(-%);
} //宽高
@mixin wh($width, $height){
width: $width;
height: $height;
}
@mixin center($width,$height){
width: $width;
height: $height;
position: absolute;
top: %;
left: %;
margin-top: -($height) / ;
margin-left: -($width) / ;
}
//字体大小、行高、字体
@mixin font($size, $line-height, $family: 'Microsoft YaHei') {
font: #{$size}/#{$line-height} $family;
} //字体大小,颜色
@mixin sc($size, $color){
font-size: $size;
color: $color;
} //flex 布局和 子元素 对其方式
@mixin fj($type: space-between){
display: flex;
justify-content: $type; }
@mixin ns{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} @mixin hlh($s1) {
height: $s1;
line-height: $s1;
overflow: hidden;
}
@mixin thl($s2,$s3){
height:$s2;
line-height: $s3;
text-align: center;
} // one line text for ...
@mixin oneline($s1) {
overflow: hidden;
line-height: $s1;
height: $s1;
white-space: nowrap;
text-overflow: ellipsis;
} // move
@mixin yd($s1:,$s2:){
-webkit-transform:translate($s1,$s2);
transform:translate($s1,$s2);
} // zoom
@mixin fd($s1:1.2){
-webkit-transform:scale($s1);
transform:scale($s1);
} // rotate
@mixin xz($deg:){
-webkit-transform:rotate($deg+deg);
transform:rotate($deg+deg);
} // for link
@mixin dz($time:.25s){
-webkit-transition: all $time ease-in-out;
transition: all $time ease-in-out;
}
//同时设置magin padding
$properties: (margin, padding);
@mixin set-value($side, $value) {
@each $prop in $properties {
#{$prop}-#{$side}: $value;
}
}
//设置magin 和 padding
@mixin set-mp($prop,$side, $value) {
#{$prop}-#{$side}: $value;
} %mt5 {
margin-top: 5px;
}
%mt10 {
margin-top: 10px;
}
%mt15 {
margin-top: 15px;
}
%pt5{
padding-top: 5px;
}
%pl10{
padding-left:10px;
}
sass 的使用心得的更多相关文章
- sass心得
1.sass的安装:(1)下载安装Ruby,记得安装的时候勾选第二项,(2)打开控制面板gem install sass(人品好的话,一下子就能安装成功)(3)如果(2)安装不成功进行一下步骤:gem ...
- Brackets + Sass 学习心得
大家知道Brackets是一个可以实时浏览html页面修改效果的工具,对于前段开发人员应该不会陌生,有了它,布局页面再也不是什么困难了, 目前为止已经更新到1.6了. 下载最新版可以到官方网: htt ...
- emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点
摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...
- Sass初使用
看慕课网materliu前辈的sass教程,http://www.imooc.com/learn/364.顺便把刚做完的项目重构一下,然后把一些笔记和心得都写在这里~ 首先安装sass,这里直接参考 ...
- sass个人学习笔记
Materliu 在慕课的视频: http://www.imooc.com/learn/364 . http://www.imooc.com/wiki/371 sass入门:http://www.w3 ...
- Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome
Sass带来的变革 作者:大漠 日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- Guava API - FluentIterable Predicate Function Odering Range Splitter
这写API可解决的问题 1. 集合元素的过滤 - FluentIterable Predicate Range Function 1) 先说Predicate<T>,这个相当与一个过滤原则 ...
- dynamic bone unity github
https://github.com/unity3d-jp/unitychan-crs 我发现我总找不到以前的东西.. https://www.cnblogs.com/alps/p/8284577.h ...
- js版根据经纬度计算多边形面积(墨卡托投影)
[摘要:var earthRadiusMeters = 6371000.0; var metersPerDegree = 2.0 * Math.PI * earthRadiusMeters / 360 ...
- IIS服务器支持.apk文件下载
随着智能手机的普及,越来越多的人使用手机上网,很多网站也应手机上网的需要推出了网站客户端,.apk文件就是安卓(Android)的应用程序后缀名,默认情况下,使用IIS作为Web服务器的无法下载此文件 ...
- ambari 大数据安装利器
https://www.ibm.com/developerworks/cn/opensource/os-cn-bigdata-ambari/
- Install Visual Studio Tools for Apache Cordova
Install Visual Studio Tools for Apache Cordova Visual Studio 2013 This article refers to the Visua ...
- 退出app 退出应用程序
退出app的两种方式1 创建activity的基类,让所有的activity都继承该基类,在基类中创建一个静态的activity列表,并在oncreate方法添加该activity,在退出时,遍历 ...
- codechef The Ball And Cups题解
The Ball And Cups At the end of a busy day, The Chef and his assistants play a game together. The ga ...
- python2.7里的StringIO.StringIO与BytesIO有什么区别
import StringIO与from io import BytesIO的区别 open()函数返回的文件对象取决于模式.当使用文本模式打开文件时,它返回一个TextIOBase的子类.当使用二进 ...
- 弹出式菜单css
#v_box { width: 700px; height: 610px; background: #fff; position: fixed; top: 50%; left: 50%; z-inde ...