Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🎉 Switch to SASS #18

Merged
merged 16 commits into from Mar 8, 2017
Merged

🎉 Switch to SASS #18

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
84cd298
Switched to SASS with Bourbon mixins
enzy Mar 7, 2017
17d7d34
variables: em-base for Bourbon em/rem functions
enzy Mar 7, 2017
f87b660
mixins: +break(XXY) for easier media queries
enzy Mar 7, 2017
8363802
mixins: absolute, fixed, relative, sticky using Bourbon position mixin
enzy Mar 7, 2017
eb9fc8b
mixins: added media
enzy Mar 7, 2017
cabdc1d
:skull: :scream_cat:
enzy Mar 7, 2017
fb8a822
Move the position mixins
JirkaVebr Mar 7, 2017
8f5d1a9
Add a smarter media mixin
JirkaVebr Mar 7, 2017
037d4d7
Move animations to a separate folder
JirkaVebr Mar 7, 2017
061113a
Move accessible to abstract and remove unsemantic helper classes
JirkaVebr Mar 7, 2017
7209cfa
Position: add another example
JirkaVebr Mar 7, 2017
ecbbeea
Move animations to _animations.sass
JirkaVebr Mar 7, 2017
123042c
Standardize color variable name prefix
JirkaVebr Mar 7, 2017
4de2d47
Add a var for fw-light
JirkaVebr Mar 7, 2017
7ea009f
styles: partials under /styles has underscore prefix
enzy Mar 8, 2017
faa0876
variables: c-comp is computed from c-main
enzy Mar 8, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/styles/comps/layout.sass
View file
Open in desktop
Expand Up @@ -2,3 +2,7 @@
display: block
max-width: 45em
margin: $spacing auto


+media($landscape)
padding: 0 60px
15 changes: 14 additions & 1 deletion src/styles/parts/example.sass
View file
Open in desktop
@@ -1,15 +1,20 @@
.example
+clearfix
margin: $spacing 0
padding: $padding
background: #f0f0f0
border-radius: $radius
text-align: center

&-child
position: relative
+relative
display: block
margin: 10px auto
background: lightyellow
border: 1px solid yellow
border-radius: $radius
outline: none
cursor: pointer
box-shadow: 1px 1px 5px rgba(#000, .5)

&:active
Expand All @@ -28,3 +33,11 @@
font-weight: bold
vertical-align: middle


+break(480)
padding: $padding*2 $padding
text-align: left

&-child
float: right
margin: -3px 10px 0
4 changes: 2 additions & 2 deletions src/styles/parts/shape.sass
View file
Open in desktop
Expand Up @@ -5,8 +5,8 @@

&-defs
+size(0)
+absolute
visibility: hidden
position: absolute
overflow: hidden

// Shapes default dimensions
Expand All @@ -30,7 +30,7 @@
* Position and center shape absolutely
*/
&.view-abs
position: absolute
+absolute
margin: auto

/**
Expand Down
6 changes: 6 additions & 0 deletions src/styles/variables.sass
View file
Open in desktop
Expand Up @@ -48,10 +48,16 @@ $landscape: '(orientation: landscape)'
$portrait: '(orientation: portrait)'

// Mixins

// +break(768) => @media (min-width: 768px)
=break($min)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nechceme zahodit ty konstantní deklarace? $break320: '(min-width: 320px)', ...

@media (min-width: #{$min}px)
@content

// +media($break320M) => @media (max-width: 319px)
=media($var)
@media #{$var}
@content
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Úplně se mi nelíbí, že jsou takhle dva separátní mixiny, a že navíc chybí něco jako breakM, tak jsem napsal univerzální řešení. Je to pohodlnější, flexibilnější a líp se s tím pracuje za použití proměnných. Klidně o tom diskutujme a společně to vylepšeme (zejména s tou magií s M mnozí klidně můžou mít problém), ale podle mě není důvod mít takhle dva separátní spíše kostrbaté mixiny.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wow. :)

Hele, proč je tam $literal * 0? Co to dělá?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Je to takovej trik na zbavení se jednotky, pokud tam nějaká je. $literal * 0 udělá z 123px 0px. Pak to + 1 udělá z 0px 1px a $literal / 1px, tedy 123px / 1px, je 123.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dík. :)

Co to 123px / 1px? Zbyde jen 123, protože jednotky se vykrátí? :D

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ano, přesně tak ‒ funguje to úplně stejně jako ve fyzice. Podobně jako 2px * 3px je v sassu 6px*px. 😃

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oukej. :D :D

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tohle byla co nejjednodušší rychlovka... Codepen vypadá fajn, co k tomu přidat nějakou dokumentaci, ať to umí pak každej používat? :)


// +absolute(0 10px 0 10px), order by specs: top right bottom left
=absolute($properties: null null null null)
Expand Down