Sass 默认样式库
Sass 默认初始化样式库
@charset "utf-8"; // 变量存储
// 字体Unicode编码 微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53
$pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial;
$defaultColor: #333;
$mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-serif, Microsoft JhengHei, Arial;
$browser: null; %display {
display:inline-block;
*display:inline;
*zoom:;
}
%text-indent {
font-size:;
text-indent:-99999em;
overflow:hidden;
}
%box-sizing {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
}
// 绝对居中
@mixin center($width, $height) {
position: absolute;
left:50%;
top:50%;
width:$width;
height:$height;
margin:(-$height / 2) 0 0 (-$width / 2);
}
// 设置动画名称
@mixin animation($aniName) {
-webkit-animation:$aniName;
-moz-animation:$aniName;
-o-animation:$aniName;
animation:$aniName;
}
// 设置延迟执行时间
@mixin animation-delay($time) {
-webkit-animation-delay:$time;
-moz-animation-delay:$time;
-o-animation-delay:$time;
animation-delay:$time;
}
// 设置阴影
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
box-shadow:$shadow;
}
// 圆角
@mixin border-radius($radius) {
-webkit-border-radius:$radius;
-moz-border-radius:$radius;
-o-border-radius:$radius;
border-radius:$radius;
}
// 设置过渡
@mixin transition($transition...) {
-webkit-transition:$transition;
-moz-transition:$transition;
-o-transition:$transition;
transition:$transition;
}
// 设置旋转位置
@mixin transform-origin($origin...) {
-webkit-transform-origin:$origin;
-moz-transform-origin:$origin;
-o-transform-origin:$origin;
transform-origin:$origin;
}
@mixin transform($transform...) {
-webkit-transform:$transform;
-moz-transform:$transform;
-o-transform:$transform;
transform:$transform;
} // 设置关键帧
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
$browser: '-webkit-'; @content;
}
@-moz-keyframes #{$name} {
$browser: '-moz-'; @content;
}
@-o-keyframes #{$name} {
$browser: '-o-'; @content;
}
@keyframes #{$name} {
$browser: ''; @content;
}
} /* ********************重置样式 reset******************** */ /* *********PC端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
ul, ol {
list-style:none;
margin:0px;
padding:0px;
}
body {
font:14px/1.5 $pcFont;
width:100%;
color: $defaultColor;
overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6 {
font-weight:normal;
}
/* 清除点击出现虚拟框 */
a{
outline:none;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
&:focus{
outline:0;
}
&:link,
&:visited {
color: $defaultColor;
text-decoration:none;
}
}
a img {
border:none;
}
input, textarea, select {
outline:none;
font:12px/1.5 $pcFont;
} /* 清除浮动 */
.clearfix {
*zoom:;
&:after {
display:block;
content:"\200B";
clear:both;
height:;
}
} /* *********移动端********** */
body, dl, dd, h1, h2, h3, h4, h5, h6, p, form, figure, figcaption {
margin:0px;
}
/* 改变盒子模型 */
section, article, nav, aside, footer, header, div, p, ul, li, input, textarea {
display: block;
@extend %box-sizing;
}
html, body {
-webkit-user-select: none;
/* 禁止选中文本 */
user-select: none;
-webkit-text-size-adjust: 100%;
/* iphone禁用文字大小调整 */
-ms-text-size-adjust: 100%;
}
html {
font-size:625%;
}
body{
font:.16rem/1.6 $mobileFont;
color:#333;
-webkit-overflow-scrolling: touch;
}
h1, h2, h3, h4, h5, h6{
font-weight:normal;
}
/* 清除点击虚拟框 */
a, div, p, span, ul, li, i, img, input {
outline:;
text-decoration:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:focus{
outline:;
}
a:link,a:visited{
color:$defaultColor;
text-decoration:none;
}
a img{
border:0 none;
}
a, img {
-webkit-touch-callout: none;
/* 禁止长按链接与图片弹出菜单 */
}
input, textarea, select {
outline: none;
color: $defaultColor;
font-family: $mobileFont;
}
input {
/* 清除 iphone 中 input 默认样式 */
-webkit-appearance: none;
}
/* 清除浮动 */
.clearfix {
*zoom:;
&:after {
display:block;
content:"\200B";
clear:both;
height:;
}
}
Sass 默认样式库的更多相关文章
- Bootstrap4默认样式不对胃口?教你使用NPM+Webpack+SASS来定制
Bootstrap 是一个流行的前端样式库,可以方便快速的构建应用,但默认样式可能不尽人意,本文就介绍如何使用 NPM, Webpack, SASS 针对它的源码来定制自己的主题.版本使用的是 Boo ...
- Vue——解决使用第三方组件库时无法修改默认样式的问题(使用 /deep/ )
最近在开发一个基于Vue的后台管理系统,其中使用了element-ui第三方ui组件库.使用过组件库的人都知道,第三方组件往往会有一些默认的样式,而有些又是我们想要改变的. 一.基础(了解 <s ...
- 使用sass语法生成自己的css的样式库
前言 先说一下 sass 和 scss的区别 sass 是一种缩进语法(即没有花括号和分号,只使用换行 缩进的方式去区别子元素,PS:这是我个人的理解) scss 是css-like语法 (它的语法 ...
- css3修改浏览器scroll默认样式
最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑 ...
- 清除浏览器默认样式——css reset & normalize.css
css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清 ...
- iOS13适配/黑暗模式的适配/KVC访问私有属性/模态弹窗ViewController 默认样式改变 /LaunchImage即将废弃/蓝牙的权限申请/推送Device Token适配/UIKit 控件变化/StatusBar新增样式
目录 1. KVC访问私有属性 2. 模态弹窗ViewController 默认样式改变 3. 黑暗模式的适配 4. LaunchImage即将废弃 5. 新增一直使用蓝牙的权限申请 6. Sign ...
- 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“×”按钮去除办法
取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...
- [Sass]不同样式风格的输出方法
[Sass]不同样式风格的输出方法 众所周知,每个人编写的 CSS 样式风格都不一样,有的喜欢将所有样式代码都写在同一行,而有的喜欢将样式分行书写.在 Sass 中编译出来的样式风格也可以按不同的样式 ...
- 用纯css改变下拉列表select框的默认样式(不兼容IE10以下)
在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计 ...
随机推荐
- Python生成器与yield
列表推导与生成器表达式 当我们创建了一个列表的时候,就创建了一个可以迭代的对象: >>> squares=[n*n for n in range(3)] >>> f ...
- Eclipse下Preferences解析
General列表下: Keys设置快捷键 Appearance->Colors and Fonts->Text-Font设置字体和大小 Appearance->Startup an ...
- git删除中文文件
git中出现如下代码时,是因为文件中包含中文.而且我们也无法用 git rm name 命令来删除该文件. deleted: "chrome_plugin/source_file/iHub\ ...
- [swustoj 917] K-lucky-number
K-lucky-number(0917) 问题描述 K-lucky-number is defined as add up the number of each bit is a multiple o ...
- OK335xS EMMC Partition hacking
#! /bin/sh # # OK335xS EMMC Partition hacking # 说明: # 本文主要是为了解读同事对EMMC分区的写法,其中有很多写法重复了,但 # 依然尽量保留其作者 ...
- RMAN备份与恢复深入解<一>
一 数据库版本 SQL> select *from v$version; BANNER ----------------------------------------------------- ...
- 什么是MBeanServer
什么是MBeanServer MBeanServer是一个包含所有注册MBean的仓库.它是JMX代理层的核心.JMX1.0规范提供一个接口叫 javax.management.MBeanServer ...
- HDU 5694 BD String 递归暴力
http://blog.csdn.net/angon823/article/details/51484906 #include <cstdio> #include <iostream ...
- e2e 自动化集成测试 架构 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (三) SqlServer数据库的访问
上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step 二 图片验证码的识别” ...
- 如何查看.Net FrameWork,VC++ 等安装包的启动参数
最近做了一个客户端的程序,客户端程序运行环境要求是.Net FrameWork 4.0 和VC++ 2012 ,在做安装包的时候需要先检测系统环境是否存在这些环境,不存在则安装对应环境. 使用工具来制 ...