How to access certain SCSS variables in Angular-Material (Angular4)?
For example, the default toolbar has a CSS class as follow:
.mat-toolbar {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 0 16px;
flex-direction: column;
}
I want to get the padding value, i.e. 16px, store it as $fatty-padding and then use it in my custom class, for example:
.custom-toolbar {
padding: $fatty-padding $fatty-padding;
margin: 0 $fatty-padding;
}
Is it possible?
Angular Material styles are written without variables:
So there is no easy way to get this styles and store to the variable in SCSS.
Related
Is it possible in SASS to generate a CSS file, where only selectors with a color property are stored?
e.g.
This SASS file
class-1 {
display: flex;
align-items: center;
padding: 0 1rem 1rem;
color: #000;
}
class-2 {
display: flex;
align-items: center;
padding: 0 1rem 1rem;
}
class-3 {
display: flex;
color: #000;
}
should be outputted as:
class-1 {
color: #000;
}
class-3 {
color: #000;
}
It is not possible with Sass itself, but you can filter out unwanted properties by using PostCSS.
I'm not aware about any plugin that does exactly this, but it should not be hard to write one by yourself. You can refer postcss-select plugin as a starting point for your implementation as it filters out CSS based on selectors.
I would like to achieve this mixin natively with Susy:
#mixin mainContainer($width, $maxWidth) {
width: $width;
max-width: $maxWidth;
margin-right: auto;
margin-left: auto;
}
How can I do that?
Thanks!
The only reason to use Susy for this mixin is if you want Susy to provide one of those two values. If you plan to pass in both the width and max-width explicitly as arguments, there's no need to involve Susy at all.
I'll assume you do want Susy to provide one of the values, so I'll just guess which one, and let you change it if I guess wrong. In order to use Susy with customized output, you'll use the container() function instead of the container() mixin:
#mixin mainContainer($max-width, $susy: $susy) {
width: container($susy);
max-width: $max-width;
margin-right: auto;
margin-left: auto;
}
I've recently updated to SingularityGS 1.4.0 and have run into an issue with my .container class using an #include clearfix; which now includes an overflow:hidden property.
For a slideshow component, I use negative/positive margins to display arrows overlapping arrows outside of the .container:
.container { //Container for the grid system
background: $background-color;
max-width: $site-width;
margin: 0 auto;
position: relative;
#include clearfix;
#include breakpoint($large-break) {
border-left: 20px solid #fff;
border-right: 20px solid #fff;
width: $site-width;
}
.container {
border: 0px;
margin: 0px;
clear: both;
}
}
.left-arrow, .right-arrow {
position: absolute;
cursor: pointer;
margin-top: -20px;
font-size: 0.8em;
width: 41px;
height: 41px;
top: 50%;
}
.left-arrow {
left: -10px;
background: url(/images/icons.png) no-repeat -153px -146px;
}
.right-arrow {
right: -10px;
background: url(/images/icons.png) no-repeat -197px -146px;
}
Here's a screenshot of the problem:
https://www.dropbox.com/s/yl4ch4yowe61kz7/Screenshot%202014-09-03%2010.06.50.png?dl=0
Should I be using something other then the clearfix mixin in my container?
Edit: - Added Sassmeister issue as requested
This version of Singularity uses the Compass clearfix. You can write your own to work as you want it:
#mixin clearfix {
&:after {
content: '';
display: table;
}
}
see: http://sassmeister.com/gist/099ef72b56365fe8ce07
Singularity doesn't have its own clearfix mixin.
You're using the clearfix mixin from Compass which leverages the overflow: hidden technhique which in turn crops your container.
The solution is to use another mixin for clearfixing.
Compass bundles three different clearfix mixins, the most usable of which is the pie-clearfix. It's output is as follows:
.foo {
*zoom: 1;
}
.foo:after {
content: "";
display: table;
clear: both;
}
I recommend that you use the clearfix mixin bundled with the beautiful toolkit Sass extension by Team Sass.
It has the following benefits over the pie-clearfix:
Shorter output that works for all modern browsers:
.foo:after {
content: "";
display: table;
clear: both;
}
Two ways of applying: the traditional mixin way (default) and the extend way. The extend way makes your CSS footprint even smaller by deduplication. The downside of the extend way is not being able to apply it from media queries, though i've never faced a situation where you would need a clearfix only in a media query and need it not to be applied outside media query.
To configure Toolkit for using the extend way apply this in the beginning of your CSS:
#include toolkit-set('clearfix extend', false);
To override current setting once use this:
#include clearfix(true);
true means the extend methhod, false means the mixin method.
Note that if you're including both Compass and Toolkit, Toolkit should come after Compass to override the clearfix mixin.
If you feel that Toolkit is too bulky for your project, simply define your own clearfix mixin after importing Compass, just like Scott suggests. Just be sure to use proper clearfix method, Scott's code (as of 2014-09-04 12:00 UTC) doesn't actually clearfix.
I am starting mobile first and adding css as the viewport gets larger, but i've run into an issue with a certain image scaling issue and i can't seem to make sense of it.
I'm using Sass to begin with.
#media 320 i include all my styles for a certain block of content on the page of which I have an image within this block and here is the CSS for this media query:
section.catalog-grid {
position: relative;
height: 100%;
overflow: hidden;
.cat-dvdr {
#include btm-brdr;
padding: 20px 0;
}
h4.catalog-title {
font-weight: normal;
font-size: 1.5em;
color: $blue;
top: 0;
padding: 0;
margin: 0;
text-align: center;
}
h6 {
font-weight: normal;
font-size: 1em;
color: $pale-grey;
padding: 0 10%;
margin: 0;
text-align: center;
}
img.cat-img {
#include center;
}
img.rocket {
width: 40%;
margin-top: 30px;
}
img.wizard {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 60%;
margin-top: 10%;
margin-bottom: 10%;
}
#media min-width 568px I actually wanted the image to be a smaller percentage scale and here's my Sass that i added to this media query:
img.rocket {
width: 30%;
margin-top: 30px;
}
img.wizard {
width: 40%;
margin-top: 10%;
margin-bottom: 10%;
}
img.order {
width: 50%;
margin-top: 10%;
margin-bottom: 10%;
}
My thinking behind this is that since i'm only adding styles that are changing as the viewport gets larger i don't have to add all of the Sass for this block (as i did at the 320px media query) but rather just add the rules that I want changed.
However what is happening is that the 320px media query image percentage size is overriding my 568px media query percentage image size when the viewport is at 568px and i'm not sure why.
Attached is a screenshot of what is going on in DevTools and i suspect that the reason that the 320px style is overriding the 568px style is due to more specificity since it notes all the parent elements of this particular image.
However i've attempted to remove the specificity from the 320px file so that the only rules that i want to be affected on the 320px file would be. In other words not include the entire block and its children but only the classes i want adjusted at this specific viewport size and that didn't work either.
Does this make sense?
Here is the screenshot:
In the 568px query, the image is targeted as:
img.rocket { ... }
In the 320px query, it's:
section.catalog-grid img.rocket { ... }
Since you have the additional specificity on the 320px rule, it will always override the less-specific rule no matter where it is located in the style sheet. You'll either need to match that specificity in your 568px rule, or reduce the specificity of the 320px rule.
In your sass, it looks like you have image.rocket contained inside the section.catalog-grid block:
section.catalog-grid {
...
img.rocket { ... }
}
That creates the compiled rule you're seeing.
I've this mixin applied on a menu, I don't want see on small resolution:
#mixin visuallyhidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}
This working fine. But on bigger resolution I will show this menu. Obviously I can restyle and revert these attributes (I'm allready done it). But I was thinking if is there some built-in way to remove mixins – something like #uninclude visuallyhidden;.
Or is there a better way how to do this?
Thanks for all suggestions.
Use media queries to only apply the styles when appropriate. Doing and undoing bloats your CSS unnecessarily.
#media (max-width: 45em) {
.foo {
#include visuallyhidden();
}
}