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);
}
}
Related
#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.
I am using the Bourbon modal reset. Its close button comes with the following styling:
.modal-close {
#include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
#include size(1.5em);
background: $modal-background;
cursor: pointer;
&:after,
&:before {
#include position(absolute, 3px 3px 0 50%);
#include transform(rotate(45deg));
#include size(0.15em 1.5em);
background: $modal-close-color;
content: '';
display: block;
margin: -3px 0 0 -1px;
}
&:hover:after,
&:hover:before {
background: darken($modal-close-color, 10%);
}
&:before {
#include transform(rotate(-45deg));
}
}
This makes it look like a grey × in the upper right of the modal. However, I would like to change it to look like a button that says "Save and Close". I'm wondering what the best method of overriding these styles is. On properties like margin, I can simply set it to whatever I want. However on #include position(....);, I am not really sure how I can reset that to none, initial, or unset. What is the best method for doing something like this? I don't want to simply remove the properties in the original refill file; I would like to keep a separate _modalOverride.scss, so I can include it where I want, but keep the original in tact. How can I override these "custom" #include properties?
Refills was designed to be overwritten so I'd just do the following to the HTML:
...
<div class="modal-close" for="modal-1">Close and Save</div>
...
and for the Scss:
...
.modal-close {
#include position(absolute, ($modal-padding /2) ($modal-padding /2) null null);
#include size(8em 1.5em);
background: tomato;
cursor: pointer;
}
...
But if you want to do an overwrite file it might be a bit trickier. You could do something like this in a file that comes after the modal.scss:
.modal-close {
position: inherit;
&:after,
&:before {
background: transparent;
}
&:hover:after,
&:hover:before {
background: transparent;
}
}
tldr: how to avoid repetition of ".well" selector in below example.
I am using bootstrap and sass to display a "well" div with a shape and with a gradient fill. This may not be a proper use of wells and I'd welcome other suggestions as to how to draw circular/rectangular divs with X% shaded (ideally where X is any integer. [0, 100]) but, for now, I am most interested in whether it's possible in SASS to get rid of the repetition of ".well". I tried using "&" but it would reverse .some_container too and I only wanted to reverse the immediate .inner_container parent to apply there (e.g. .inner_container.round). [There is one outer_container and multiple inner_containers. Each inner_container has one well.]
.outer_container {
.inner_container {
&.round .well {
border-radius: 50%;
}
&.barely_filled .well {
#include gradient-horizontal(sienna, $well-bg, 0%, 25%);
}
&.half_filled .well {
#include gradient-horizontal(sienna, $well-bg, 0%, 50%);
}
&.fairly_filled .well {
#include gradient-horizontal(sienna, $well-bg, 0%, 75%);
}
&.mostly_filled .well {
background-color: sienna;
}
}
}
The most terse way to write it would be like this:
#mixin well($sel) {
&#{$sel} .well {
#content;
}
}
.outer_container {
.inner_container {
#include well('.round') {
border-radius: 50%;
}
#include well('.barely_filled') {
test: 1;
}
#include well('.half_filled') {
test: 2;
}
#include well('.fairly_filled') {
test: 3;
}
#include well('.mostly_filled') {
background-color: sienna;
}
}
}
However, in addition to being more verbose, I feel that this decreases readability over what you currently have.
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
From the Susy docs: http://susy.oddbird.net/guides/reference/#ref-grid-background
SUSY GRID BACKGROUND
Show the Susy Grid as a background-image on any container.
// susy-grid-background();
.page { #include susy-grid-background; }
If you are using the element as your Container, you need to apply a background to the element in order for this grid-background to size properly.
Snippets of my css:
$total-cols : 16;
$column-width : 4em;
$gutter-width : 1em;
$grid-padding : $gutter-width;
html { background: #fff no-repeat left top; }
.standard {
#include container;
#include susy-grid-background; /* Susy */
and in my Haml:
%body.standard
Whatever I've tried the grid always shows 12 columns. Would anyone be kind enough as to point me in the direction I need to go to get this debug tool to work?
susy (1.0.rc.1)
compass (0.13.alpha.0)
If you have some breakpoints, you also need to address these directly in order to change the number of columns $susy-grid-background shows:
.page {
#include container ($total-columns, $break1, $break2);
#include susy-grid-background;
#include at-breakpoint($break1) {
#include susy-grid-background;
}
#include at-breakpoint($break2) {
#include susy-grid-background;
}
}
$total-cols should be called $total-columns. The name of that variable changed in 1.0. The default setting is 12 columns, and you are not actually overriding that anywhere.