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 ...
随机推荐
- QT开发(十二)——QT事件处理机制
一.QT事件简介 QT程序是事件驱动的, 程序的每个动作都是由内部某个事件所触发.QT事件的发生和处理成为程序运行的主线,存在于程序整个生命周期. 常见的QT事件类型如下: 键盘事件: 按键按下和松开 ...
- Qt 串口类QSerialPort 使用笔记
Qt 串口类QSerialPort 使用笔记 虽然现在大多数的家用PC机上已经不提供RS232接口了.但是由于RS232串口操作简单.通讯可靠,在工业领域中仍然有大量的应用.Qt以前的版本中,没有提供 ...
- MapReduce中的分布式缓存使用
MapReduce中的分布式缓存使用 @(Hadoop) 简介 DistributedCache是Hadoop为MapReduce框架提供的一种分布式缓存机制,它会将需要缓存的文件分发到各个执行任务的 ...
- IDEA下clean Maven项目
如何调试出窗口: 点击菜单栏View->Tool Windows->Maven projects ♦如下图,选中之后.点击绿色三角形就可以clean了
- RHEL7.0 配置网络IP的三种方法
导读 RHEL7里面的网卡命名方式从eth0,1,2的方式变成了enoXXXXX的格式. en代表的是enthernet (以太网),o 代表的是onboard (内置),那一串数字是主板的某种索引编 ...
- 使用mocha测试
学习了MOCHA官网的示例,将学习成果记录一下.[原文+例子:使用mocha测试] mocha是什么 Mocha是一个跑在node和浏览器上的javascript测试框架,让异步测试变得简单有趣, 并 ...
- dTree无限级文件夹树和JQuery同步Ajax请求
曾经都是用JQuery对树的支持来实现文件夹树的,近来闲来无事就弄了下dTree,感觉其无限级文件夹还是挺好的,并且它的使用也比較方便,基本上就是先把要用的js文件即dtree.js和css文件dtr ...
- Linux 重启Tomcat脚本
#!/bin/test_restart.sh #Author : Javen #Desc : restart tomcat-test tomcatpath="/home/local/test ...
- 001-Cocos2dx-2.1.3环境搭建-windows
图片丢失,转到:http://blog.csdn.net/whyhowwhat/article/details/51908229
- [Android exception] /data/app/com.tongyan.tutelage-1/lib/arm/libstlport_shared.so: has text relocations
java.lang.UnsatisfiedLinkError: dlopen failed: /data/app/com.tongyan.tutelage-1/lib/arm/libstlport_s ...