本文以上图为例子:

首先在根目录创建一个sass文件,在sass文件中分别创建4个文件夹bsae,pages,libs,style;

base下存放:样式重置_normalize.scss;

      自己定义的scss代码块:_help.scss(如果项目大可以再细分为funiton,mixin,variable等);

      通用部分_common.scss;(如上图中的头部,如需要可再细分为common-header , common-nav等部分)

pages下存放每个对应的html需要的scss文件,如_index-style.scss, _hot-sell-style.scss等;

libs下存放外部库,如果你有使用boosharp,jqui 等库的话;

style下放每个html对应的scss,如index.html则对应的scss为:   index.scss.

style下面的每个文件只需要引入所需要的文件即可,import会将导入的scss文件合并成一个文件(注意导入的必须是scss或sass文件)如图所示:

可以发现上面只有style下面的scss文件没有_下划线,这是因为以_开头的不会进行编译,我们需要的只是将最终的style下面的index.scss编译成index.css,然后将index.css引入到html中去,如果不加上_

编译时会产生多余的css文件,如main.css, base.css,这些只是部分,我们需要的只是最终组合好的完整的style.css;

目录搭建好后,可以开始写文件了,通用部分和样式重置就不讲了,这里只讲help常用的scss。

几个psd图都有一个相同的颜色,(类似皮肤),将此颜色定义为一个变量:

$maincolor:#f84056;

使用如下:.header{background-color:$maincolor}

使用变量的好处是修改是只需修改一个地方即可,将#f84056改为#fff,对应的地方也会全部改变,轻松实现网页换肤;

也可以使用%占位符,%maincolor{background-color:#f84056};

使用如下:.header{@extend  %maincolor}

类似占位符的有继承,这个容易理解,使用为:div{@extend  .header}  即继承.header的样式;

嵌套:如header{

   nav{

    color:red

  }

}

输出为:header nav{color:red}

使用嵌套写起来回方便很多,尤其是在使用伪类,伪元素时, 如清浮动

.clearfix{
    &:after{
      content: "";
     display:table;

  clear:both;

}
}

&代表当前层次;

函数:

@function torem($px){
@return $px / 75px * 1rem;
}

使用如下torem(100px),此函数主要用户将px转化为rem,75px位html跟元素的font-size,可配合淘宝flexible.js使用,如果使用css可以下载cssrem插件将px转化为rem

scss最有用的个人认为还是mixin,个人常用mixin如下:

ios下字体:

@mixin font-dpr($font-size) {
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}

绝对定位

@mixin poa($w,$h,$l,$t){
position:absolute;
width:$w;
height:$h;
left:$l;
top:$t;
}

table居中

@mixin table-center{
display: table-cell;
vertical-align: middle;
text-align: center;
}

margin或者translate居中

@mixin poa-center($w,$h){
position:absolute;
width:$w;
height:$h;
left:50%;
top:50%;
// margin-left:-($w/2);
// margin-top:-($h/2);
transition:translate(-50%,-50%)

}

flex居中

@mixin flex-center {
display: flex;
justify-content: center;
align-items: center;
}

字体溢出。。。
@mixin t-overflow($line:1){
@if $line==1{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}@else{
display: -webkit-box;
-webkit-line-clamp:$line;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}

sass如此强大,但在我笔下竟然感觉好水,看来人丑还是要多读书啊!!!1

     

      

将sass快速引入到移动端项目中加速开发的更多相关文章

  1. flutter 项目中,开发环境、多接口域名、多分支的配置

    flutter 项目中,开发环境.多接口域名.多分支的配置 开发环境:配置成多个入口文件.比如:main.dart.main_develop.dart.main_preview.dart 多域名:每个 ...

  2. 基于vue-cli,sass,vant的移动端项目

    项目架构 开始 vue init webpack    项目名称         //新建项目,cd进入新项目 npm install axios                    //先安装! ...

  3. 推荐一款稳定快速免费的前端开源项目 CDN 加速服务

    前面学习到什么是CDN,全称是Content Delivery Network,即内容分发网络.CDN的通俗理解就是网站加速,CPU均衡负载. CDN的基本思路是尽可能避开互联网上有可能影响数据传输速 ...

  4. 如何快速搭建一个 Node.JS 项目并进入开发?

    了解:如何快速搭建一个项目并进入开发? 在此不概述 Node.JS 的历史以及发展过程. 因为之前接触过通过 Java 开发语言,所以明确地知道一个服务器所需的文件,以及一个服务器所需要的操作. 那么 ...

  5. 快速将wax配置到项目中进行lua开发

    通过Finder浏览到你保存该项目的文件夹.创建三个新的文件夹:wax.scripts和Classes. 第一:首先,下载源代码的压缩包.Wax放在GitHub上(https://github.com ...

  6. 移动端项目中 @2x 图 和 @3x 图 的使用

    移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片.通过@media (媒体查询),判断设备的dpr. @mixin ...

  7. vue PC端项目中解决userinfo问题

    在vue2 中用脚手架建立的项目,后端提供接口获取数据.在公司做第一个项目的时候不清楚公司里的对接流程,结果后续代码被一个接口整的乱七八糟,这个接口是获取用户信息的接口——'usre/info'. 如 ...

  8. 我们为什么在移动端项目中选择jQuery而不是Zepto

    1.文件大小比较 首先从cnd上(http://www.bootcdn.cn/)下载jquery和zepto. jquery下载的是2.2.4版本压缩: zepto下载的是是1.20压缩版本: 二个文 ...

  9. 【零售小程序】—— webview嵌套web端项目(原生开发支付功能)

    index → index.wxml  套webwiew // url 活动url bindmessage 接收信息 <web-view src='{{url}}' bindmessage='m ...

随机推荐

  1. 再也不学AJAX了!(二)使用AJAX

    在上一篇文章中我们知道,AJAX是一系列技术的统称.在本篇中我们将更进一步,详细解释如何使用Ajax技术在项目中获取数据.而为了解释清楚,我们首先要搞清楚我们是从哪里获取数据的,其次我们关注的才是获取 ...

  2. 爬虫之JSON

    数据提取之JSON与JsonPATH JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,它使得人们很容易的进行阅读和编写.同时也方便了机器进行解析和生成.适 ...

  3. Javase、Javaee、Javame的区别

    /*简而言之,javase是基础,要先学,javaee是企业级,接着学,然后可以转到javaweb方向,javame是做移动应用的.基础必须先学,然后再考虑下一步*/ Java 平台有三个版本,这使软 ...

  4. 返回值过长时被nginx截断的解决办法

    今天在写接口时碰到了这个问题,返回json格式的数据,但是被截断了经过排查,才发现是数据过大超出缓冲区最大容量,而将数据写入临时文件时又没有权限,所以再返回时,超出缓冲区的数据将丢失解决方法:给fas ...

  5. Android开发-网络通信2

    调试了三种通信方法:HttpClient.AsyncHttpClient 和 Volley . HttpClient 测试代码[1]: public class HttpUtil { public s ...

  6. MySQL索引最左原则

    通过实例理解单列索引.多列索引以及最左前缀原则 实例:现在我们想查出满足以下条件的用户id: 因为我们不想扫描整表,故考虑用索引. 单列索引: ALTER TABLE people ADD INDEX ...

  7. Apache 2 移植到Arm开发板

    第一步,安装pcre: tar -xvzf pcre-8.31.tar.gz cd pcre-8.31 ./configure --prefix=$ARMROOTFS/usr/pcre 的错误,如下图 ...

  8. ubuntu16.04 安装以及要做的事情

    1.安装ubuntu 选择安装时更新,以及MP3.图形等:然后选择分区(ext4)(安装时需先进入虚拟系统连上网,输入清华net账号),分区情况按照下图来,swap为临时用的内存分区,可以不要: 选择 ...

  9. 为什么U盘在拔出之前需要“安全弹出”?

    前言 我们不知道从什么时候开始有一个观念:U盘一定要点击“安全弹出”才能拔.那么是不是在任何情况下都必须要这样呢? 介绍 U盘的传输策略有两种: 写入缓存:这种策略在windows中称为“更好的性能” ...

  10. C语言实现顺序表

    C语言实现顺序表代码 文件SeqList.cpp #pragma warning(disable: 4715) #include"SeqList.h" void ShowSeqLi ...