In my answer, I will assume that you have not understood absolutely nothing of the code. So forgive me of dithism or if I may say many obvious things:
SASS ?
The code you posted is SASS. Acronym for Syntactically Awesome Style Sheets , it is one of several CSS extension languages out there and in particular my favorite. SASS has two syntaxes and therefore two file formats: .scss and .sass . The fundamental difference between the two is that the latter is based on indentation (as well as python ). It uses this indentation to define the code blocks. For example:
//.sass
body
.wrapper
h2
color: red
Equivalent to:
//.scss
body{
.wrapper{
h2{
color:red;
}
}
}
And both are compiled to
//.css
body .wrapper h2{
color:red;
}
You can play around with both syntax in this playground , and read the documentation here .
What SASS does is basically give you a faster alternative to writing some selectors that would be complicated or repetitive to build in pure CSS, or use a lot of mathematical logic. Just the case of your code.
Media queries
Media queries are, in a very crude way, conditions for their style rules. If you have something like
//.sass
@media print
body
width: 100%
The property will only be applied at the time of printing. (In this case, <body> with 100% of width ). See here the truck for things you can do with them.
Speaking specifically of your code, what it does is use the super powers of SASS to create a series of media queries that would be extremely complicated to construct without it. These media queries are responsible for making the text responsive.
At the beginning, we have these 3 variables (variables in SASS are defined by the presence of the character $ )
// Flowtext
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default;
Note that the variable $range depends on two others, which are $large-screen and $small-screen . I gave a hunt inside the framework, and found the following values:
$small-screen: 600px !default;
$large-screen: 1200px !default;
From these two values, the size of the interval in which the media queries will act (% cos_de%) is defined. The logic that follows is quite straightforward: a default value is set to $interval-size of class font-weight , as well as a .flow-text counter that is declared as $i . It is used to control the loop that will create the ( 0 ) media queries, which will set 20 and font-size of everything inside this class to a series ( line-height ) of different cuts. These values are defined in units rem . Therefore, the complete code
// Flowtext
//.scss
$small-screen: 600px !default;
$large-screen: 1200px !default;
$range : $large-screen - $small-screen !default;
$intervals: 20 !default;
$interval-size: $range / $intervals !default;
.flow-text{
font-weight: 300;
$i: 0;
@while $i <= $intervals {
@media only screen and (min-width : 360 + ($i * $interval-size)) {
font-size: 1.2rem * (1 + (.02 * $i));
}
@media only screen and (min-width : 0 + ($i * $interval-size)) {
line-height: .8rem * (1 + (.13 * $i));
}
$i: $i + 1;
}
}
Compiled, stay (get ready):
.flow-text {
font-weight: 300;
}
@media only screen and (min-width: 360px) {
.flow-text {
font-size: 1.2rem;
}
}
@media only screen and (min-width: 0px) {
.flow-text {
line-height: 0.8rem;
}
}
@media only screen and (min-width: 390px) {
.flow-text {
font-size: 1.224rem;
}
}
@media only screen and (min-width: 30px) {
.flow-text {
line-height: 0.904rem;
}
}
@media only screen and (min-width: 420px) {
.flow-text {
font-size: 1.248rem;
}
}
@media only screen and (min-width: 60px) {
.flow-text {
line-height: 1.008rem;
}
}
@media only screen and (min-width: 450px) {
.flow-text {
font-size: 1.272rem;
}
}
@media only screen and (min-width: 90px) {
.flow-text {
line-height: 1.112rem;
}
}
@media only screen and (min-width: 480px) {
.flow-text {
font-size: 1.296rem;
}
}
@media only screen and (min-width: 120px) {
.flow-text {
line-height: 1.216rem;
}
}
@media only screen and (min-width: 510px) {
.flow-text {
font-size: 1.32rem;
}
}
@media only screen and (min-width: 150px) {
.flow-text {
line-height: 1.32rem;
}
}
@media only screen and (min-width: 540px) {
.flow-text {
font-size: 1.344rem;
}
}
@media only screen and (min-width: 180px) {
.flow-text {
line-height: 1.424rem;
}
}
@media only screen and (min-width: 570px) {
.flow-text {
font-size: 1.368rem;
}
}
@media only screen and (min-width: 210px) {
.flow-text {
line-height: 1.528rem;
}
}
@media only screen and (min-width: 600px) {
.flow-text {
font-size: 1.392rem;
}
}
@media only screen and (min-width: 240px) {
.flow-text {
line-height: 1.632rem;
}
}
@media only screen and (min-width: 630px) {
.flow-text {
font-size: 1.416rem;
}
}
@media only screen and (min-width: 270px) {
.flow-text {
line-height: 1.736rem;
}
}
@media only screen and (min-width: 660px) {
.flow-text {
font-size: 1.44rem;
}
}
@media only screen and (min-width: 300px) {
.flow-text {
line-height: 1.84rem;
}
}
@media only screen and (min-width: 690px) {
.flow-text {
font-size: 1.464rem;
}
}
@media only screen and (min-width: 330px) {
.flow-text {
line-height: 1.944rem;
}
}
@media only screen and (min-width: 720px) {
.flow-text {
font-size: 1.488rem;
}
}
@media only screen and (min-width: 360px) {
.flow-text {
line-height: 2.048rem;
}
}
@media only screen and (min-width: 750px) {
.flow-text {
font-size: 1.512rem;
}
}
@media only screen and (min-width: 390px) {
.flow-text {
line-height: 2.152rem;
}
}
@media only screen and (min-width: 780px) {
.flow-text {
font-size: 1.536rem;
}
}
@media only screen and (min-width: 420px) {
.flow-text {
line-height: 2.256rem;
}
}
@media only screen and (min-width: 810px) {
.flow-text {
font-size: 1.56rem;
}
}
@media only screen and (min-width: 450px) {
.flow-text {
line-height: 2.36rem;
}
}
@media only screen and (min-width: 840px) {
.flow-text {
font-size: 1.584rem;
}
}
@media only screen and (min-width: 480px) {
.flow-text {
line-height: 2.464rem;
}
}
@media only screen and (min-width: 870px) {
.flow-text {
font-size: 1.608rem;
}
}
@media only screen and (min-width: 510px) {
.flow-text {
line-height: 2.568rem;
}
}
@media only screen and (min-width: 900px) {
.flow-text {
font-size: 1.632rem;
}
}
@media only screen and (min-width: 540px) {
.flow-text {
line-height: 2.672rem;
}
}
@media only screen and (min-width: 930px) {
.flow-text {
font-size: 1.656rem;
}
}
@media only screen and (min-width: 570px) {
.flow-text {
line-height: 2.776rem;
}
}
@media only screen and (min-width: 960px) {
.flow-text {
font-size: 1.68rem;
}
}
@media only screen and (min-width: 600px) {
.flow-text {
line-height: 2.88rem;
}
}
Notice the birthing that would be writing (and calculating!) these media queries without the power of pre-processing. It is worth remembering that the values on which the calculations are based (ie, 20 , were defined by the authors of the framework.) They possibly did tests and more tests to conclude that the calculation that should be done is exactly this and that the values that they they are the ones that provide the result they were looking for.You can change these values and see the result.
