Is there any way to change the menu width without using SASS? (I'm running Windows 8.1, and I can't tell you how much I don't want to install Ruby...)
I can change the width of the menu contents, but the mmslideout moves to the wrong place.
I believe you can override the .mm-menu class in your custom css file for the min-width, max-width properties.
Regarding SASS compilation, i would recommend using Libsass, it's an efficient C/C++ port of the Sass CSS precompiler.
Sassy Studio seems a pretty clean VSIX, and worked for me. (Eventually ;). I'm new to SASS.)
Related
I get this annoying dialog when my SCSS is compiled by sass ruby gem.
How do I disable it?
I solved this simply by removing the folder which contains the compiled assets from Chrome's workspaces. I never quite saw the point of having compiled assets in there anyway, and it gets rid of the dialog.
I am using Intel XDK to use develop ionic app. I wanted to override the default color variables for ionic. I followed the followings steps exactally:
Writing a Sass Theme
and finally gulp sass command to complile sass.
I got the my desired color for balanced variable, but all the ionic icons are not displaying
I do not know what went wrong.
Yo can use custom CSS elements to overwrite color properties. Use Intel xdk console to inspect the element first then create a custom css for that element.
I want to change the font in Squib.
How do I do this.
There is a font folder and also I can see where I set the font in the layout, do I need to set it anywhere else.
I'm wanting to use FiraSans-Regular.otf and FiraSans-Heavy.otf
At this point in time, Squib doesn't support loading fonts locally. You'll have to install the font on your system, and then do something like text font: 'FiraSans'. I generally keep my font files in my git repo just for portability.
Loading local fonts has been discussed by the Pango team (what Squib uses for text), and they are making the process less painful as I understand it. http://mces.blogspot.com/2015/05/how-to-use-custom-application-fonts.html. It will be a while until that translates to Ruby, as well, since cross-platform compatibility is hard when it comes to fonts.
I've created a GitHub issue to track on this if you want to follow it:
https://github.com/andymeneely/squib/issues/105
I am using a bootstrap 3 template and have noticed on some that scrolling is not smooth and kind of bumpy. I am not even sure what to look for. This only happens in Chrome. It does NOT happen in Safari or Firefox.
Is this a javascript or css problem? I have never run across this before.
This seems to happen worse in Chrome for mac, but also happens in chrome for windows.
It seems to happen when I make the window smaller and then make it bigger again. If I leave the window the same size, it seems to scroll fine.
Link:
http://demo.phppointofsalestaging.com --> Click Sales then resize the window in Chrome and then scroll down and then up. You will notice it is very bumpy and not smooth
:root { scroll-behavior: auto; }
Add this simple code to your custom CSS file.
"scroll-behavior" declared as "smooth" in bootstrap css/bootstrap.reboot.css.
So we need to overwrite it using our custom css.
The problem is in the jquery.nicescroll plugin that is used with the theme, the function jQuery.fn.scrollTop make the problem, it takes more than 75% from the cpu when run. my solution is :
You are using the jquery.nicescroll plugin version 3.4.0 use the latest version currently version 3.5.0 available.
If not working as expected, downgrade to version 3.2.0 I'm using it with my site without any problem.
Also check that if the hwacceleration in the Configuration parameters of the plugin is set to (default: true).
Update 1:
nicescroll plugin is a solution to have a custom scrollbars compatible with desktop, tablet and phone devices and to override the default scrollbars of the browser " more information her ", "you didn't see the diffrence because the plugin used in your project works when your browser window under 767px" so another solution if you don't need it you can remove the plugin from your files by following this steps:
Delete the plugin file (jquery.nicescroll.js) from your script folder.
Delete the plugin link from all your files.
Delete the plugin function lines (21 to 36), (49 to 66), (149) from (unicorn.js) file.
Update 2:
I made some tweaks for the (unicorn.js), download it from her, then replace your original one.
Hope this will help you.
Often times I use "edit css" functionality in web developer extension to edit my style sheets.
It's a great feature but it takes time to edit the css and copy it back to an editor to save it.
I am planning to use Compass for my next project and I am wondering how I can use "edit css" functionality with SASS/Compass.
There's no way to do this the way you're expecting.
The flow will have to work like the following ->
Write Compass/SCSS -> Refresh Page -> Edit CSS to get results -> Re-Edit SCSS with previous step and or copy/paste.
Because it compiles down, there's no solution I know of yet that hooks it back in to the SCSS layer.
I don't think it will be much different from what you're doing now..
Compass will precompile the stylesheet written with Sass/SCSS, it will be a regular stylesheet by the time it reaches the browser, so if you then use the "edit CSS" function of your browser toolbar it will work the same way as you do now only you will need to go back to the SASS/SCSS file and insert the changes into the right place (e.g. it could be in a nested rule or mixin or function, depending on how you've written the SASS/SCSS file) - then Compass can recompile the stylesheet
Codekit
Codekit is a great product for OSX that will allow you to edit your local files and as you hit save it will automatically inject the new compiled stylesheet into your browser without a page refresh, so it will at least save you that step. However, as of yet there is no Windows counterpart that I'm aware of.
I've used Codekit on a pretty large project recently where we were using SCSS and it was certainly helpful. Although sadly, like you, I'm used to the "Edit CSS" Web Developer Toolbar workflow, and I've yet to find an exact translation over into the SASS world.
Web Putty
One other option that has some potential (but some SERIOUS drawbacks) is a open source framework from Fog Creek called Web Putty. It was a service they offered that allowed you to live edit CSS in the browser, including SASS and SCSS flavored CSS, but they stopped the service and simply open sourced the software so getting it setup is entirely on you and requires quite some effort (THATs the drawback).
This is possible now with experimental support for Sass in the Chrome dev tools.
First enable the support for Sass:
Then make sure you're compiling to anything other than compressed and enable debug info in Sass. If you're compiling from the command line, pass the --debug-info flag, if you're using Compass, add this to your config.rb:
sass_options = { :debug_info => true }
Presto, you have access to the Sass source in the dev tools:
Clicking on the line number in the dev tools will allow you to edit and apply the local changes:
Personally, I prefer to use compass watch in conjunction with LiveReload and edit in my editor, but for those of you that like to edit in the browser, you can now edit the Sass files directly.
Don't forget to compile to compressed before deploying.