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 ...
随机推荐
- 网络游戏MMORPG服务器架构
转载于:http://justdo2008.iteye.com/blog/1936795 1.网络游戏MMORPG整体服务器框架,包括早期,中期,当前的一些主流架构 .关键词 网络协议 网络IO 消息 ...
- ASP.NET 5 Beta5来了(翻译)
在6月30日微软发布了ASP.NET 5 Beta5,我们可以从http://nuget.org上获取Beta5 的packages. 随着VS2015RC发布的ASP.NET 5的版本号是Beta4 ...
- iOS:面向对象的思想使用sqlite数据库
SQLite支持的常见数据类型如下所示. –INTEGER 有符号的整数类型 –REAL 浮点类型 –TEXT 字符串类型,采用UTF-8和UTF-16字符编码 –BLOB 二进制大对象类型,能够存放 ...
- Android -- 再来一发Intent
之前写过一篇Intent的博客,主要说了一下隐式意图. 传送门:<Android -- Intent> Intent对象构成 Component name.Action.Data.Cate ...
- iScroll示例,下拉刷新,上拉刷新
iScroll示例,下拉刷新,上拉刷新 <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- crm2013安装和部署语言包
步骤 1:安装语言包 假设具有执行 Microsoft Dynamics CRM for Microsoft Office Outlook 的用户,除了在执行 Microsoft Dynamics C ...
- easyui datagrid 分页保持checkbox选中状态
刚开始我一直迷迷糊糊的写了很久,发现其实很简单 先给大家看看我的笨办法 var checkedItems = []; function ischeckItem() { for (var i = 0; ...
- #define 与 typedef
1.#define:预编译指令,在预编译的时候,进行文本替换. 2.typedef:编译时处理,为类型取一个别名. 3.#define与typedef的顺序是相反的,记住typedef就行了.type ...
- PHP - AJAX 与 MySQL
PHP - AJAX 与 MySQL AJAX 可用来与数据库进行交互式通信. AJAX 数据库实例 下面的实例将演示网页如何通过 AJAX 从数据库读取信息: 本教程使用到的 Websites 表 ...
- Asp.net MVC中Html.Partial, RenderPartial, Action,RenderAction 区别和用法【转发】
Html.partial和RenderPartial的用法与区别Html.partial和RenderPartial都是输出html片段,区别在于Partial是将视图内容直接生成一个字符串并返回(相 ...