I am new to Susy and I am trying to utilize span-columns mixin however I am getting the following error:
Syntax error: Undefined mixin 'span-columns'
I have installed compass-susy-plugin (0.9) and I do not have the Susy gem installed.
SCSS Files include screen.scss and _base.scss
screen.scss
// Imports -------------------------------------------------------------------
#import "base";
#import "typography";
/* Layout ------------------------------------------------------------------*/
.container {
#include container;
#include susy-grid-background;
}
.main {
#include span-columns(8,12);
}
.left-sidebar {
#include columns(2);
#include alpha;
background-color: red;
}
.right-sidebar {
#include columns(2);
#include omega;
background-color: red;
}
_base.scss
// Imports -------------------------------------------------------------------
#import "susy";
// Grid ----------------------------------------------------------------------
$total-cols : 12;
$col-width : 4em;
$gutter-width : 1em;
$side-gutter-width : $gutter-width;
$show-grid-backgrounds : true;
According to the changelog that I have, the columns mixin in version 0.9 was renamed to span-columns in version 1.0 so I would say that the span-columns mixin did not exist back in the 0.9 branch of Susy.
Current version is 1.0.5 and this is what I am using without issues (so far).
Here is another answer from the docs:
Susy 2.x supports two syntax options, side by side. If you want to use the latest release but keep the old syntax, change your import from susy to susyone.
// With Susy 2.x installed...
#import "susyone";
Related
Here is an original code from compiled TailwindCSS file:
.translate-y-full {
--transform-translate-y: 100%;
}
It does not work. The syntax of CSS is incorrect. When I changed it to:
.translate-y-full {
transform: translateY(100%);
/* --transform-translate-y: 100%; */
}
It started to work.
Maybe I am missing something but it seems to be bug and a big one...???
Add transform to the classes.
<img class="transform translate-y-full" ...>
Maybe you forgot to put this line below in your css codes
#tailwind base;
This is my styles/scss file where I am importing variables from variables.scss file:
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'variables';
#import '../node_modules/font-awesome/scss/font-awesome';
//some basic resets
body {
padding:0;
margin:0;
font-family: Roboto, sans-serif;
}
.container {
margin: 20px;
display:flex;
flex-direction: column;
}
This is my variables.scss file:
$fa-font-path : '../node_modules/font-awesome/fonts';
Error generated:
ERROR in ./node_modules/#angular/platform-browser/ivy_ngcc/fesm2015/animations.js 222:180-202 "export 'AnimationEngine' (imported as 'ɵngcc1') was not found in '#angular/animations/browser'
Okay so I have a fix for this. I was writing my imports for #font Awesome wrongly.
This is what I had initially.
#import '#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'variables';
#import '../node_modules/font-awesome/scss/font-awesome';
However, after some angular updates, this way of calling font awesome is no longer supported and will generate an error. Therefore, this is how to actually call font-awesome.
/* You can add global styles to this file, and also import other style files */
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
#import 'variables';
#import '../node_modules/font-awesome/scss/_variables.scss';
Therefore, there is the fix.
Is there a way to exclude color propertys from sass compilation in webpack sass compiler, to prevent the opacity problem in child elements.
At the moment it compile this:
div {
background: rgba(255, 255, 255, 1);
}
to:
div {
background: white;
}
Sorry for my bad english :)
You can't prevent it. Because it's a sass function that converts the color to hex.
But there are few ways to avoid it
you can create your own rgba function that will do the trick for you
#function rgba($r, $g, $b, $a) {
#return unquote('rgba(#{$r}, #{$g}, #{$b}, #{$a})');
}
But doing this means there are changes that, if some one is using rgba(hex, a) then it will fail, if there are some one using syntax like rgba(rgb(255,255,255), 1) then also it will fail. So you have to look in your project structure and see how the syntax is there in all the files. And you have to mention to the team to use rgba alone.
Or else you can create a simple mixin
#mixin mysuper-rgba($hexcolor, $opacity) {
background-color: $hexcolor;
background-color: rgba($hexcolor, $opacity);
}
body {
#include mysuper-rgba(#11111, 0.5);
}
What I suggest is create a mixin that will do the trick for you and ask all your developers to use the same.
I am trying to compile Qt 5.3.2 for i.MX6, using Yocto. I am using the dizzy branches of both fsl-community-bsp and meta-qt5.
The compilation succeeds, I compile meta-toolchain-qt5 and I configure QtCreator... actually I am able to run minimal Qt applications (both widget-based and QML-based). My problem comes when I want to use the QML WebView element... In such a scenario the application crashes with various (random?) errors: SIGILL, SIGABRT, pointer exceptions and so on... as if someone is overwriting the code memory with garbage...
Here it the full stacktrace (taken from QtCreator):
My source code is very simple... my main.cpp is the following:
#include <QApplication>
#include <QQuickView>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
QQuickView view;
view.setSource(QUrl("qrc:/main.qml"));
view.showFullScreen();
return app.exec();
}
My main.qml is the following:
import QtQuick 2.3
import QtWebKit 3.0
Rectangle {
visible: true
x: 0
y: 0
width: 480
height: 272
Text {
text: qsTr("Hello World")
x: 0
y: 0
}
WebView
{
id: webview
width: 480
height: 272
url: "qrc:/test.html"
x: 0
y: 0
}
}
test.html is a standard HTML page (only some sample text in it)...
If I remove WebView from my QML the application works fine... Any ideas about what is causing the problem? Does someone else has similar problems?
If it helps, please consider that using Yocto I have compiled the image named fsl-image-multimedia-full and all Yocto and meta-qt5 files are unchanged, except for the fact that I made some modifications to avoid compiling Qt examples, to exclude xcb and dbus support and to include sqlite support.
Ok, I've found a working solution... Playing with framebuffer settings, I've succeeded in making my test working passing fbpix=BGR32 to the kernel command line...
My command line is now:
console=ttymxc3,115200n8 root=/dev/mmcblk0p2 rootwait rw video=mxcfb0:dev=lcd,SAMSUNG-LMS700,if=RGB24,fbpix=BGR32 splash consoleblank=0 video=mxcfb1:off video=mxcfb2:off
and it does work!
Te error:
css/chpw.scss (Line 13: Mixin "at-breakpoint" does not accept a content block.)
The scss:
#import "compass";
#import "compass/reset";
#import "susy";
#include at-breakpoint(30em 12) {
.page { #include container; }
}
No matter what I try at-breakpoint keeps breaking. Using ruby-2.0.0-p0 and compass-susy-plugin (0.9)
susy (1.0.8).
I had this same problem on Windows 7. Eric Meyer's answer is correct. Typing gem uninstall compass-susy-plugin at the command line solved the problem.