Some CSS tricks that Frontend itself may not know (Part 10)
- Tram Ho
1. The power of &
in SASS
1.1. Combining with BEM is very effective
Suppose to have 1 CSS output like this:
1 2 3 4 5 6 | <span class="token selector">.component</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 <span class="token selector">.component__title</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 <span class="token selector">.component__title--small</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 <span class="token selector">.component__box</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 <span class="token selector">.component__box-content</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 |
Then in our SASS code we will just need to write a brief nesting selector like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token selector">.component </span> <span class="token punctuation">{</span> 
 <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 <span class="token selector"><span class="token parent important">&</span> __title </span> <span class="token punctuation">{</span> 
 <span class="token comment">// & = ".component"</span> 
 <span class="token selector"><span class="token parent important">&</span> --small </span> <span class="token punctuation">{</span> 
 <span class="token comment">// & = ".component__title"</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 <span class="token selector"><span class="token parent important">&</span> __box </span> <span class="token punctuation">{</span> 
 <span class="token comment">// & = ".component"</span> 
 <span class="token selector"><span class="token parent important">&</span> -content </span> <span class="token punctuation">{</span> 
 <span class="token comment">// & = ".component__box"</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 |
1.2. Use &
with selectors >
, +
, ~
In part 1 of this series, I introduced a tip about the selector :not
in case of creating border separating between navigation items, I continue to analyze that case!
I chose non-final items and set border-right
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.nav-item </span> <span class="token punctuation">{</span> 
 <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 
 & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> last-child <span class="token punctuation">)</span> <span class="token punctuation">{</span> 
 <span class="token property">border-right</span> <span class="token punctuation">:</span> 1px solid black <span class="token punctuation">;</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 
 <span class="token comment">// .nav-item:not(:last-child) { ... }</span> 
 |
I will select the non-first items and set border-left
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.nav-item </span> <span class="token punctuation">{</span> 
 <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 
 & <span class="token punctuation">:</span> <span class="token function">not</span> <span class="token punctuation">(</span> <span class="token punctuation">:</span> first-child <span class="token punctuation">)</span> <span class="token punctuation">{</span> 
 <span class="token property">border-left</span> <span class="token punctuation">:</span> 1px solid black <span class="token punctuation">;</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 
 <span class="token comment">// .nav-item:not(:first-child) { ... }</span> 
 |
Certainly the result is similar
And I have a more concise way instead of typing :not(:first-child)
, now just & + &
1 2 3 4 5 6 7 8 9 10 | <span class="token selector">.nav-item </span> <span class="token punctuation">{</span> 
 <span class="token punctuation">{</span> ... <span class="token punctuation">}</span> 
 
 <span class="token selector"><span class="token parent important">&</span> + <span class="token parent important">&</span> </span> <span class="token punctuation">{</span> 
 <span class="token property">border-left</span> <span class="token punctuation">:</span> 1px solid black <span class="token punctuation">;</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 
 <span class="token comment">// .nav-item + .nav-item { ... }</span> 
 |
1.3. Additional styles for components in different contexts
According to Documentation of SASS it is defined as Referencing Parent Selectors
Speaking for easy understanding like this,
I have 3 pages Home , Contact and About , starting with each page I have a class wrapper named home-wrapper
, contact-wrapper
and about-wrapper
I have a component of the button, the background color is red
And on the About page, I need the button to be filled with a background of gold
Then I will write the SASS code as follows:
1 2 3 4 5 6 7 8 9 10 11 | <span class="token selector">button </span> <span class="token punctuation">{</span> 
 <span class="token property">background-color</span> <span class="token punctuation">:</span> red <span class="token punctuation">;</span> 
 
 <span class="token selector">.about-wrapper <span class="token parent important">&</span> </span> <span class="token punctuation">{</span> 
 <span class="token property">background-color</span> <span class="token punctuation">:</span> yellow <span class="token punctuation">;</span> 
 <span class="token punctuation">}</span> 
 <span class="token punctuation">}</span> 
 
 <span class="token comment">// => button { background-color: red; }</span> 
 <span class="token comment">// => .about-wrapper button { background-color: yellow; }</span> 
 |
This way of writing is very beneficial for maintaining the code later.
References:
- https://css-tricks.com/the-sass-ampersand/
- https://css-tricks.com/sass-techniques-from-the-trenches/#article-header-id-0
2 :initial-letter
really beneficial! [Not Cross-Browsers]
Have you ever met the type layout pages, news has huge capital letters at the beginning of the title yet?
Like the letter T in the title "Talking to your … .." as shown below
You will immediately think of the ::first-letter
attribute to style the letter T above, but unfortunately the pseudo element above is not enough to have the same CSS as the image.
I can only apply color
or padding
for the first letter, it is impossible to set font-size
with the desired number of lines of text .
Fortunately, CSS has just released a new attribute called initial-letter, unfortunately it is still in the draft phase and currently only works on Safari.
Please open this article to see on Safari!
If you are looking at the image below, then our initial-letter
attribute is already working ok!
References:
- https://caniuse.com/#feat=css-initial-letter
- https://css-tricks.com/almanac/properties/i/initial-letter/
- https://webdesign.tutsplus.com/tutorials/better-css-drop-caps-with-initial-letter–cms-26350
3. Fun game with transform: scaleX(-1)
Have you ever considered moving the scrollbar to the left, instead of the right?
It's a bit crazy, but suppose you're building your own unique and strange portfolio site, then modifying the UI to make it go against the UX concept is a bit of a good idea sometimes!
With 2 simple steps:
- Set
transform: scaleX(-1)
on the parent tab, the scrollbar moves to the left, but the text direction is inverted from right to left - Set further
transform: scaleX(-1)
then the text returned to standard from left to right.
Refer to the previous sections here:
Source : Viblo