dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

suppression des mixins less et sass inutiles

Browse Source 
.rem(), .em() et .px() (si compatibilité anciens navigateurs
nécessaires, il faudra désormais passer par des task runners pour
convertir les rem en em/px)
This commit is contained in:
raphaelgoettter 2015-03-04 15:23:56 +01:00
parent 8e038c2210
commit 51ef45846b
4 changed files with 64 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
less/_00-config.less
View File

@ -47,19 +47,3 @@
// misc (choose unit you prefer) // misc (choose unit you prefer)
@gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem @gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
// LESS mixins : don't touch or you'll be banned ;)
// px to em/rem
.rem(@size, @bf: @base-font-size){
@rem: @size / 10;
font-size: unit(round(@base-font-size * @size /10), px);
font-size: unit(@rem, rem);
}
.em(@size, @bf: @base-font-size){
@em: @size / @bf;
font-size: unit(round(@em,2), em);
}
.px(@size, @bf: @base-font-size){
@px: @size * @bf;
font-size: unit(round(@px,2), px);
}

54
less/_01-base.less
View File

@ -149,23 +149,23 @@ h6,
/* alternate font-sizing */ /* alternate font-sizing */
.smaller { .smaller {
.em(@base-font-size - 4); font-size: 0.6em;
} }
.small { .small {
.em(@base-font-size - 2); font-size: 0.8em;
} }
.big { .big {
.em(@base-font-size + 2); font-size: 1.2em;
} }
.bigger { .bigger {
.em(@base-font-size + 4); font-size: 1.5em;
} }
.biggest { .biggest {
.em(@base-font-size + 6); font-size: 2em;
} }
code, code,
@ -338,6 +338,33 @@ body > script {
/* alignments (blocks and inline) */ /* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------ */
/* blocks alignment */
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
/* left (or starting) elements */ /* left (or starting) elements */
.left, .left,
.start { .start {
@ -366,20 +393,3 @@ img.start,
img.end { img.end {
margin-bottom: @tiny-value; margin-bottom: @tiny-value;
} }
.center {
margin-left: auto;
margin-right: auto;
}
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}

31
sass/_00-config.scss
View File

@ -47,34 +47,3 @@ $ultra-large-screen : 1920px; // ultra large screens
// misc (choose unit you prefer) // misc (choose unit you prefer)
$gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem $gutter : 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
// Sass mixins : don't touch or you'll be banned ;)
// px to em/rem
@mixin rem($size) {
@if unitless($size) {
font-size: ($size * 1rem) / 1rem * $base-font-size;
font-size: $size * 1rem;
}
@else {
@warn "Please make sure `$size` is unitless."
}
}
@mixin em($size) {
@if unitless($size) {
$bf: $base-font-size / 1px;
font-size: $size / $bf * 1em;
}
@else {
@warn "Please make sure `$size` is unitless."
}
}
@mixin px($size) {
@if unitless($size) {
$bf: $base-font-size / 1px;
font-size: $size * $bf * 1px;
}
@else {
@warn "Please make sure `$size` is unitless."
}
}

53
sass/_01-base.scss
View File

@ -142,23 +142,23 @@ h6, .h6-like {
/* alternate font-sizing */ /* alternate font-sizing */
.smaller { .smaller {
@include em($base-font-size / 1px - 4); font-size: 0.6em;
} }
.small { .small {
@include em($base-font-size / 1px - 2); font-size: 0.8em;
} }
.big { .big {
@include em($base-font-size / 1px + 2); font-size: 1.2em;
} }
.bigger { .bigger {
@include em($base-font-size / 1px + 4); font-size: 1.5em;
} }
.biggest { .biggest {
@include em($base-font-size / 1px + 6); font-size: 2em;
} }
code, code,
@ -332,6 +332,33 @@ body > script {
/* alignments (blocks and inline) */ /* alignments (blocks and inline) */
/* ------------------------------ */ /* ------------------------------ */
/* blocks alignment */
.left {
margin-right: auto;
}
.right {
margin-left: auto;
}
.center {
margin-left: auto;
margin-right: auto;
}
/* text and contents alignment */
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}
/* left (or starting) elements */ /* left (or starting) elements */
.left, .left,
.start { .start {
@ -361,19 +388,3 @@ img.end {
margin-bottom: $tiny-value; margin-bottom: $tiny-value;
} }
.center {
margin-left: auto;
margin-right: auto;
}
.txtleft {
text-align: left;
}
.txtright {
text-align: right;
}
.txtcenter {
text-align: center;
}