Im working on a new project and started to use grunt-sass instead of grunt-contrib-sass because its alot faster. I also removed compass. The thing now is that i cannot find a way to add 'susy' grid and 'breakpoint' anymore. I used to put this in a config.rb file but im not using this anymore because im not using compass.
So i added all susy style in my project and thats works fine but its not my preferred method. But cant find a way to add breakpoint.
Is there a way to add these? Or do i have to use compass for this?
Sorry for my bad english, not very good at it.
No need for Compass, there's a new susy-media breakpoint Mixin designed to work with LibSass which is what you are essentially using via grunt-sass. That's what I use and it works great. So you'd define some Susy grid variables and breakpoints in a _vars.scss partial for example:
// Define susy.
$susy: (
columns: 12,
gutters: .8,
);
// Define some breakpoints.
$bp-narrow: 30em; // 480px
$bp-med: 48em; // 768px
Now put it all together, say in _layout.scss for example:
// the breakpoint (media query)
#include susy-media($bp-med) {
// now a grid
.l-foobar-wrap {
.foo {
#include span(7)
}
.bar {
#include span(5 at 8)
}
}
}
For more info, read the susy docs, it's all there for you and this works with grunt-sass (LibSass). It's part of my everyday workflow.
Note, as an alternative for really nice media query rendering and retina workflows, I now use Include Media rather than susy-media and it also works fine with LibSass.
Related
I'm hacking some SASS code (I've never seen any SASS before, I've only used plain old CSS2 in the past) and feel like I don't really understand what does #include media-query($variable) mean. I've tried googling it but surprisingly it doesn't seem to find any kind of manual or example for this code. As far as I understand it is used to define a medium-specific rule to apply a different style when the web page is rendered on a mobile device and in fact this is what I need but I feel like I have to understand the exact meaning of the code to use it correctly.
#include media-query($variable)
is a mixin call.
you should have somewhere in your sass files a mixin declaration like this:
#mixin media-query($variable) {
// ...
}
As I added webpack to my NativeScript iOS app to bundle it in preparation for release, I discovered that the various some-page.minWH600.css "qualifier" files I was using to target different screen resolutions are no longer loading. (See NativeScript docs for supporting multiple screen sizes using qualifiers)
I then refactored a bit to test for small vs medium vs large tablet screens, planning to add a .css file programmatically via...
if (mediumScreen) page.addCssFile(app.minWH600.css);
...but discovered due to the bundling of pages in webpack, page.addCssFile() doesn't work either.
Does anyone have another solution to add css classes to support different screen resolutions that works with webpack?
I can think of the obvious: using many getViewById() calls and adding either NS/js properties and or css styles (or a css class) to each view, but that's laborious and kludgey...
I'd prefer to somehow redefine the relevant css classes on the fly like I was able to before bundling with webpack, but I don't know if that is possible?
To answer my own question, because someone else may have to solve this someday, I came up with two workarounds.
Simply redefining the class using:
if (mediumScreen) page.addCss(".class {font-size:18 }, .class2 {font-size: 14}");
Oddly enough that works, even though page.addCssFile() does not. The disadvantage is that the css presentation is buried in the code and this is less maintainable.
By using the "nativescript-dom" plugin to gather all the views by class and defining a function to add ".classTablet" to all views containing ".class", I was able to keep all the css together in one css file for easier maintenance. I simply added the class for the larger screen size to that file and use:
if (tabletScreen) addSizeClass("welcomeButton","welcomeButtonTabletSize");
which calls the global function:
require("nativescript-dom"); // must install this nativescript plugin
addSizeClass = function(className, newSizeClassname) {
// note page is a global variable and is set in onNavigatedTo
var items = page.getElementsByClassName(className); //getElementsByClassName() is from nativescript-dom plugin
items.forEach((item) => { item.className += " " + newSizeClassname; }); //define and maintain a new size class in app.css
}
Of course, better yet might be configuring NativeScript webpack to be smarter. But I am no webpack configuration guru.
I made a huge mistake and I'm looking for some help.
After building a site with CSS, mobile-first responsive, with respond.js as a polyfill, after I tested it in IE compatibility mode during developing I realized at the end that there's a big conflict between respond.js and the javascript used by the CMS and the Internet Explorer 8 blocks everything from rendering.
I decided to drop the polyfill entirely and go the SASS way with it, using a MQ mixin.
Right now the problem is that IE8 is seeing the mobile version of the website
(sorry I can't give you a link to it)
I have included conditionizr for < ie9 and I have used css2sass to get my CSS nested a little.
I found a great MQ mixin by Stuart Robson (here) ** that I have not yet started to add it, the question is, do I have any other option than to go and edit everywhere I used mq in the code?
The mixin I think I have to use looks like this ** (adapted it a little to make a better use of it for my problem):
#mixin mq($point, $IE9: true, $query1: min, $query2: width) {
#if $IE9 == true{
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
.lt-ie9 & {
#content;
}
}
#else {
#media screen and (#{$query1}-#{$query2}: $point +px) {
#content;
}
}
}
I'm not going to debug the JavaScript code to make the polyfill work. I have tried several other scripts (including css3-mediaqueries) but I dropped the idea of help from javascript and I want to go the SASS way.
Given that there's a chunk of almost 6k lines of SASS code, is there any SASS way to help me with adding the mixin somehow so that I end up getting something like this?
#media screen and (min-width: 320px) {
body {
margin: 0;
}
}
.lt-ie9 body {
margin: 0;
}
I learned my lesson, started using BrowserStack and I will only go with that mixin from now on. There's still the problem at hand that has to be fixed..
Thanks in advance.
Regards
I will edit all the MQs to use the new mixin and I also have to learn more SASS and stop asking silly questions about it! :)
Thanks everyone!
I’ve hacked around this before by writing my own mixins, but I get a feeling there must be an inbuilt method in Susy to get around this problem.
I have a mobile-first grid which uses my default $grid-padding, say 1.5em, but once I hit my first breakpoint I switch to a wider $grid-padding-tablet, perhaps 3em, and so on through other breakpoints.
In addition, some elements also use the bleed mixin to give the visual impressions of infinite width.
Is there an easy way, just using something like #include container rather than building my own media queries and mixins to accomplish this?
The built-in technique for this is the with-grid-settings mixin (documentation):
#include at-breakpoint($tablet) {
#include with-grid-settings($padding: $grid-padding-tablet) {
// your tablet code here
}
}
According to documentation http://compass-style.org/help/tutorials/spriting/sprite-layouts/
There is a way to create 'smart' sprite layout, because I'm not satisfied with vertical one.
hello.sass
#orange-layout:smart
#import "orange/*.png"
#include all-orange-sprites
I'll try to generate it by command compass compile test
But it doesn't work for me. I'm still receiving 'vertical' sprite.
Problem was in using # instead of $. Working version $orange-layout:smart