marvin1023 / sasscore Goto Github PK

View Code? Open in Web Editor NEW

464.0 34.0 139.0 401 KB

一份基础的scss库，包括常用reset, mixin, grids, typo, css3, media queries等多个文件，是你sass开发的必备库

Home Page: http://w3cplus.com/sasscore/index.html

CSS 100.00%

sasscore's Introduction

sassCore 3.0——Just for Better

sassCore 很久都不更新了，如有需要请迁移至更精简的sandal

sassCore参考了compass和bourbon等众多优秀的sass库，根据项目实践，归纳总结而成，一直以来为了更好而不断完善。

sassCore提供了一些基础和常用的东西，基于它你可以扩展出很多组件等，如果你对这个有兴趣，可以参考下基于sassCore的tobe。

如何使用？

sassCore分核心文件和扩展文件两种。其中核心文件提供一些基础的样式和@mixin，%等方便调用；而扩展文件则提供一些模块的样式，如form，table等。

详细使用文档请移步：w3cplus sassCore

核心文件调用

第一种除提供基础功能外，会产生一份reset样式：

@import "d:/sassCore/base";

第二种不产生任何样式，只提供功能的调用：

@import "d:/sassCore/function";

扩展文件调用

根据需要调用，以table为例：

@import "d:/sassCore/ext/table";

注：因为sass不能导入在线sass文件，而sassCore也没有提供安装版的使用，所以默认统一放在D盘进行调用。

##五大特点：

sassCore涵盖范围广。核心文件有setting，css3，media-queries，mixin，grid，reset；扩展文件有animate，font-face，btn，message，form，table，helps，typography；除此之外还有两个集合文件function和base。
sassCore对兼容采用了开关控制机制。如对是否支持ie6/7可以通过设置为true或false以生成对应的代码。
sassCore严格控制样式冗余累赘。使用开关变量做到需要什么样式就加载什么样式，按需开启，避免样式冗余累赘。
sassCore设计了两种调用方式，一种是只调用功能，不产生任何多余的css代码；另一种是包含了些重置样式。为团队的合作开发提供了良好的解决方案。
sassCore借鉴优秀的作品，根据实战创造新的方法，紧跟前沿，每一个文件都是经过深思熟虑，几易其稿，在实用和卓越上狠下功夫。

文件简述

sassCore包括两个集合文件（base，function）和两个文件夹（core，ext）。其中core文件夹中为核心基础文件，包括setting，css3，media-queries，mixin，grid，reset；而ext文件夹中是一些扩展文件，包括animate，font-face，btn，message，form，table，typography，helper。

两个集合文件（base，function）导入的都是core中的文件，区别在于base除了提供基本功能之外还会生成一份reset样式，而function则只提供基本功能。至于ext中的文件则属于额外的一些模块扩展，可根据需求导入。

core文件

setting

负责基础变量的文件，如常用的颜色，字体等变量。

css3

建议使用 postCSS 的 autoprefix 来解决前缀。负责css3属性前缀的文件。参考了bourbon，然后进行一系列的扩展及优化，以使解析出来的代码更加合理。

media-queries

负责响应式宽度判断的文件。主要是对响应式布局的一些宽度判断，来自paranoida的sass-mediaqueries。

mixin

负责功能方面的文件。这里我们大概分成三个部分，一个是混合部分即mixin，一个是placeholder选择器部分即%，最后就是我们的function函数部分。我们常用的include及extend当然就是来自于这里了。

grid

负责网格系统的文件。默认为固定宽度布局（1000px），可以通过设置$gridPercentSwitch为true来切换为流体布局，也可以通过设置$gridSpanSwitch为true或false来控制是否输出各个网格的class。

reset

在normalize的基础上，根据目前我们大家的使用习惯进行了一些归零行动，及设置文字字体颜色，是否输出打印样式。

ext文件

animate

将animate.css转成scss版本，默认不输出任何样式，需要什么动画先导入对应的动画文件，然后include调用即可。

font-face

来自Font Awesome的字体图标，可以根据自己的需求使用其他字体图标，默认不输出任何class，可根据实际需求输出其中的某些icon。参考了大漠的font-awesome模块

btn

为按钮设计的文件，里面定义了一系列mixin，可用于自定义按钮，默认生成两种按钮

message

交互提示信息，包括警告，错误，成功，提示四种状态的样式

form

提供了表单元素样式及几种常见的表单组合样式，可通过变量控制输出

table

提供几种常用的表格样式，可通过变量来控制输出

helper

常用的几个class，可以根据自己的喜好定义。

typography

负责文字排版的文件。这里主要考虑到文章详细页和其他页面的一些不同情况而给详细页加入了article这个class，里面的一些元素如ul，li，p给予一定的样式，而不是清零。

sasscore's People

Contributors

Stargazers

Watchers

Forkers

gigi13164269 nevergiveup-j remielorz ghostyee henryzp minghe jerrywenlong happysha yolio2003 qfishy ericlva dawn-king ksky521 imhu riyue smallbusy tongxunlu wbteve hivan shuiwushang artskin visioncan robinma lijuns ycg520520 pengyan518 sisihuisi jerrysdesign jahon hehos edwardyi skymancn ravechan kxws888 jtyjty99999 veilanr mingzepeng zjut yangfei19881024 flyer153 xiaomingming salcabar ccjoe pancn zhanyouwei loveyedie cvufo lijiliang wen12128 stiyes laxiston wklc2015 adrainhsu zyj1022 gavinhans miaomiao8890 wangkailang winniebear jacobmoon jiangyanghe bluepeople1 renpengfeier changfuguo dorislyx 13429652665 fishlittlerain xxkiko zhuowenli hoozi lienmac ywc6688 snow0622 ccppchen bianyuan800 cacalot123 magicento xwg2015 sunliyan alexguo88 xianxingzhe hu19891110 djlxiaoshi zhishaofei3 dongzipeng lzl852 cccyei imakimaki fucssjs mayue2015 uncleyuan mavinbin liuxueliang111 web-yuzm fay-hu rescss pofuchenzhou lihui2015 liangrongliu wd2016gitbuild sakura1024

sasscore's Issues

%float-left 似乎没有定义

core/_grid.scss
106行:
@if $i < $gridColumns { @extend %float-left; }
%float-left
好像没有定义?

// inline-block
// ie6-7 _display: inline;_zoom:1;
@mixin inline-block ($extend:true) {
@if $extend {
@extend %inline-block;
} @else {
display: inline-block;
@if $lte7 {
_display: inline;_zoom:1;
}
}
}
%inline-block{
@include inline-block(false);
}

以上说库中对 inline-block的定义，理解了一下，感觉在自己绕圈子呢？以下是为我的分析：
分几种情况：
一：调用 @include inline-block，执行 @mixin里的条件true，再执行 %inline-block，再执行 @mixin 里的条件false，最终是执行 @mixin里的条件 false；
二：跳用 @include inline-block(false)，直接调用 @mixin里的条件 false；
三：调用 %inline-block，直接调用 @mixin里的条件 false；

以上就是所有的调用方式，但是最终都是调用 @mixin里的条件 false；

不知道还有其他调用方式吗？

如你介绍一样，@mixin 和％在sass解析成css的时候不一样，但是在用gulp等自动化工具将css合并压缩css为一行的时候，也会自动组合css样式的，那么这个问题是否可以忽略呢？

无法过渡transfrom

调用_css3.scss中的transition:

// Return vendor-prefixed property names if appropriate
// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background
//----------------------------------------
@function transition-property-names($props, $vendor: false) {
  $new-props: ();
  @each $prop in $props {
    $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
  }
  @return $new-props;
}

@function transition-property-name($prop, $vendor: false) {
  // put other properties that need to be prefixed here aswell
  @if $vendor and $prop == transform {
    @return unquote('-'+$vendor+'-'+$prop);
  }
  @else {
    @return $prop;
  }
}

// transition
//----------------------------------------
@mixin transition ($properties...) {
  @if length($properties) >= 1 {
    @include prefixer(transition, $properties, webkit moz o ms spec);
  }

  @else {
    $properties: all 0.15s ease-out 0;
    @include prefixer(transition, $properties, webkit moz o ms spec);
  }
}

实际引用：

li {

    @include transition(transform .2s ease );
}

编译出来的css：

li{
    -webkit-transition: transform 0.2s ease;
    -moz-transition: transform 0.2s ease;
    -o-transition: transform 0.2s ease;
    -ms-transition: transform 0.2s ease;
    transition: transform 0.2s ease; 
}

我需要的是：

li{
    -webkit-transition: -webkit-transform 0.2s ease;
    -moz-transition:-moz-transform 0.2s ease;
    -o-transition: -o-transform 0.2s ease;
    -ms-transition: -ms-transform 0.2s ease;
    transition: transform 0.2s ease; 
}

有何办法可以解决

部分mixin比较坑，如果不传参数，就会变成%的效果

@import "../bower_components/sassCore/base";

.container{
    @include center-block;
    width:getWidth();
    min-width: getWidth();
}

上面代码，会如下输出

.container {
  margin-left: auto;
  margin-right: auto; }

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 * 0. sassCore's style
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  overflow-y: scroll;
  /* 0 */
  -webkit-overflow-scrolling: touch;
  /* 0 */ }

这个和文档不一致，会直接输出在reset部分的前面，我要去看源码才能找出问题所在

建议更精简一些，现在的看着太多太复杂了

借鉴别人的代码感觉有些多

能不能处理这个warning，太烦人了

.WARNING: Unrecognized prefix: moz
D:/www/github/sassCore/core/css3:41, in mixin prefixer
D:/www/github/sassCore/core/css3:103, in mixin box-sizing
D:/www/github/sassCore/core/mixin:275

ING: Unrecognized prefix: moz
D:/www/github/sassCore/core/css3:41, in mixin prefixer
D:/www/github/sassCore/core/css3:208, in mixin transition
D:/www/github/sassCore/core/mixin:322

ING: Unrecognized prefix: o
D:/www/github/sassCore/core/css3:41, in mixin prefixer
D:/www/github/sassCore/core/css3:208, in mixin transition
D:/www/github/sassCore/core/mixin:322

建议打包成库，比如 Ruby Gem 或 Node Package，这样方便升级，一条命令直接升级最新版本。
建议再出一个Saas版本，虽说 SCSS 很方便转换到 Sass ，但是每次升级还是麻烦，特别是使用包管理之后。

Good to have some samples

Suggest to add basic layout example so it can quickly get user started