#import "../../../styles/media-queries";
#mixin mobile-width {
#include mobile {
width: 100%;
}
}
#mixin desktop-width {
#include desktop {
width: 464px;
}
#include tablet {
width: 464px;
}
}
#mixin desktop-tablet-properties {
#include desktop {
#content;
}
#include tablet {
#content;
}
}
#mixin mobile-properties {
#include mobile {
#content;
}
}
.main-container {
position: absolute;
box-sizing: border-box;
width: 100vw !important;
// #include desktop-tablet-properties {
// top: 165px;
// }
#include desktop-tablet-properties {
}
}
Hello Everyone, I am getting weird "Error: Transform failed with 1 error: ERROR: Unterminated string token" while trying to use mixin with #include in my Scss.
When I comment <#include> mixin statement the app Builds perfectly.
I tried this with fresh angular non-production environment It works.
Also, I tried with adding stylePreprocessorOptions in my server Json(in angular.json) as suggested in one of the post but to no avail.
Can someone Help?
Thanks
You might need to share with us your #mixin mobile to better debug the problem. Mixins usually require params to work, so take a look at your original mixin.
Also, I would recommend using #use "../../../styles/media-queries" as *;
rather than #import.
Related
I have this code: i've tried traslate with this page: https://jsonformatter.org/scss-to-css but it does not worked, it say me this line is the problem #include transition($transition-fade);
.fade {
#include transition($transition-fade);
&:not(.show) {
opacity: 0;
}
}
.collapse {
&:not(.show) {
display: none;
}
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
#include transition($transition-collapse);
}
how can i traslate from scss to css plain?
The tool can't resolve the include. Therefor you have to do that manually.
go to the source of the transition include
copy the code
find and replace all #include transition($transition-collapse); with the copied code
adjust pasted code to match the variable parameter passed to the mixin e.g. $transition-collapse or $transition-fade
I have following scss style. I have added bg color as variable & it is working fine. I need to add 'icons.png' also as variable.
.home {
#include themify($themes) {
background: url(images/icons.png) themed('bgcolor');
}
}
How to add "icons.png" as veritable? like
background: url(images/VARIABLENAME) themed('bgcolor');
You can try this.
$image: 'icons.png';
.home {
#include themify($themes) {
background: url(images/${$image}) themed('bgcolor');
}
}
How do I undo the bleed-x() mixin at a smaller breakpoint so box4 (the yellow box) in example 2 goes back in between the purple columns and doesn't wrap to the next line.
.story4 {
#include bleed-x();
#include span(2);
background: yellow;
height: 80px;
#include breakpoint($small) {
#include span(8 last);
}
}
Codepen:
http://codepen.io/meijioro/pen/aBdWyO
Bleed is a combination of negative margins and positive padding. Reset both to 0 to override:
#include breakpoint($small) {
#include span(8 last);
margin: 0;
padding: 0;
}
In general, I try to avoid breakpoint overrides by limiting the original application. Something more like this:
.story4 {
#include span(2);
background: yellow;
height: 80px;
// use your own tools to create max-width breakpoints...
// this limits the bleed, so we don't have to override it later.
#media (max-width: $small) {
#include bleed-x();
}
#include breakpoint($small) {
#include span(8 last);
}
}
Succinctly, By using Susy's at-breakpoint responsive mixin, is there a way or function to include an external CSS file in the body of the breakpoint call?
Something like this:
.page {
border: 1px dashed #000;
height: 650px;
#include container;
.content {
color: red;
text-align: center;
border: 1px dashed red;
height: 400px;
#include span-columns(4 omega, 6);
.main {
color: green;
border: 1px dashed green;
text-align: center;
#include span-columns(1, 2);
}
.secondary {
color: blue;
border: 1px dashed blue;
#include span-columns(2, 3);
}
}
#include at-breakpoint(800px 8 250px) {
#include container;
.content {
#include span-columns(1, 1);
}
//IMPORT or INCLUDE CSS FILE HERE somehow...
} //end of breakpoint
}
I was hoping it was possible, because that'd be a whole lot cleaner than writing all the CSS rules I wish to be applied right there inline. Let me know if it's possible or what's the best practice in this case.
Thank you!
Sure. This isn't really a question about Susy, so much as a question about Sass. The same answers are true for working in the context of any wrapping mixin.
You can only import files at the root level (for now, at least) — but that's not your only option. I've seen people write all their site styles inside mixins, and then simply include those mixins as needed:
#mixin medium-layout {
// your medium css
}
.page {
#include at-breakpoint($medium) {
#include medium-layout;
}
}
You can use as many mixins as you like, call them whatever you want, and put them in other files (as long as you #include those files before calling the mixins).
I use a different approach. Rather than nesting everything under a .page selector, with big groups for each breakpoint, I break things up into modules, and keep the breakpoint styles attached to each module as needed.
// _main.scss
.main {
color: green;
#include at-breakpoint($medium) { /* changes to main */ }
}
// _secondary.scss
.secondary {
color: blue;
#include at-breakpoint($medium) { /* changes to secondary */ }
}
From a mobile-first perspective, where breakpoint styles may need to override or build on existing styles, this keeps all the related code in one place.
I'm using the Foundation 4 framework, and have run into an issue where the margins are being overridden by the Framework's margins, which means I am unable to apply margins to certain elements without having to use the !important keyword.
Below is my _grid.scss file, which applies the layout grid for mobile browsers.
%row {
#include grid-row;
}
%columns-1 {
#include grid-column(1);
}
%columns-2 {
#include grid-column(2);
}
%columns-3 {
#include grid-column(3);
}
%columns-4 {
#include grid-column(4);
}
%columns-5 {
#include grid-column(5);
}
%columns-6 {
#include grid-column(6);
}
%columns-7 {
#include grid-column(7);
}
%columns-8 {
#include grid-column(8);
}
%columns-9 {
#include grid-column(9);
}
%columns-10 {
#include grid-column(10);
}
%columns-11 {
#include grid-column(11);
}
%columns-12 {
#include grid-column(12);
}
header {
#extend %row;
#branding {
#extend %columns-6;
}
#main-navigation {
#extend %columns-6;
position: absolute;
top: 0;
left: 0;
}
#mobile-navigation-toggle {
}
}
#games-list {
#extend %row;
}
#blog-entries {
#extend %row;
.entry {
#extend %row;
img {
#extend %columns-4;
}
.entry-blurb {
#extend %columns-8;
}
}
}
footer {
#footer-links {
#extend %row;
.link-block {
#extend %columns-6;
}
}
}
And here is the affected line in the base.scss file:
.entry {
margin-bottom: 10px;
.entry-blurb {
.entry-description {
display: none;
}
}
}
It will only work if I apply !important to it. Looking at the Web Dev Tools I can see the issue, but no idea how to solve it:
I think the problem may be because I am defining placeholders in SASS for the grid to avoid code bloat. Usually you would use a mixin, and the code would be included directly within the elements in CSS which would override the margins for that element then.
Extend vs a mixin isn't going to make a difference here. Your selector simply has too much specificity to be overridden by such a simple selector: #blog-entries .entry is a more specific instance of .entry.
You have a few options:
Don't nest your selectors (avoids having such a strong selector like #blog-entries .entry in the first place)
Make your second selector have as much specificity (or more) than the first one
Use !important