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文档),它是一个新的网站的最终设计 ...
随机推荐
- 判断浏览器类型-----------navigator.userAgent.indexOf()
<script language="JavaScript"> <!-- function getOs() { var OsObject = "" ...
- C/C++中static关键词的作用
1.在函数体内的static变量作用范围是该函数体,其只被内存分配一次,所以在下次调用的时候会保持上一次的值. 2.模块内的static全局变量可以被模块内的所有函数访问,但不能被模块外的函数访问. ...
- 1019.Line Painting(线段树 离散化)
1019 离散化都忘记怎么写了 注意两个端点 离散化后用线段树更新区间 混色为-1 黑为2 白为1 因为N不大 最后直接循环标记这一段的颜色查找 #include <iostream> ...
- function 的声明
<?php function test() { echo "abc"; } test(); ?> 结论: 一 编译 a.对 函数声明进行词法分析和语法分析:在语法分析中 ...
- bzoj3572
通过这题我知道了一个鬼故事,trunc(ln(128)/ln(2))=6……以后不敢轻易这么写了 好了言归正传,这题明显的构建虚树,但构建虚树后怎么树形dp呢? 由于虚树上的点不仅是议事会还有可能是议 ...
- IE的体系和webrowser
IE的体系 WebBrowser Host首先,必须有COM的基础知识,因为IE本身就是COM技术的典型应用.我们看到最上层是WebBrowser的宿主(Host),也就是任何你想重用(ReUse)w ...
- ExecuteStoreQuery
using (var webdb = new kyj_NewHouseDBEntities()) { string sql = "select * from developer where ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
- BigRender
当一个网站越来越庞大,加载速度越来越慢的时候,开发者们不得不对其进行优化,谁愿意访问一个需要等待 10 秒,20 秒才能出现的网页呢? 常见的也是相对简单易行的一个优化方案是 图片的延迟加载.一个庞大 ...
- CF GYM 100703A Tea-drinking
题意:龙要制作n个茶,每个茶的配方是一个字符串,两个字符串之间有一个差值,这个差值为两个字符串每个对应字母之间差的绝对值的最大值,求制作所有茶时获得的所有差值中的最大值. 解法:克鲁斯卡尔.将茶的配方 ...