Questions tagged [sass]
Sass is a CSS preprocessor which enables advanced features not available in normal CSS.
82 questions
0
votes
0
answers
70
views
DOM manipulating that I called Framework
I'm building a framework like this that can turn SASS-like code into CSS, a template engine like Mustache, a DOM manipulator like React, and a router to add a single page app, and I'm having a ...
3
votes
2
answers
233
views
Prey Throbber using CSS Animation
I'm migrating to web development and wanted to learn CSS animations better. I was playing Prey last night and realized the "throbber" on the elevator screen would be interesting to ...
- 16.3k
6
votes
1
answer
234
views
Small Bayes Calculator to learn Javascript
I am trying to learn UI design so I threw together a Bayes Calculator (i.e. calculate the posterior probability of being sick given a positive/negative test result using the specificity, sensitivity ...
- 163
2
votes
0
answers
75
views
A simple recipe page in HTML, SASS and JS
I've been learning how to design responsive webpages. I got done the basics and can create code that closely resembles the design, but I was wondering what are the best practices in web development ...
- 121
3
votes
0
answers
66
views
Travel agent website
I've created a travel agent website, I would like to know how can I improve, DRY my code and how to increase performance - I tinified img's but the bottom one I've made in PS takes much time to load.
...
- 377
0
votes
1
answer
489
views
Christmas tree made up only with HTML and CSS
I've created a Christmas tree using only HTML and CSS. It's pretty sure that the code can be written in a more efficient way. Also, the lights are turning on and off at the same time, is there a way ...
- 181
2
votes
3
answers
229
views
Task-list app, which allows to add and remove tasks from list
I wrote my first web app. Please let me know what I should improve. I want to write as clean code as possible.
App is about adding and removing tasks from list. Backend is written in Django, frontend ...
1
vote
1
answer
46
views
Is there a more dynamic way to target siblings in CSS / SCSS?
The code I'm working on looks like this - All the way up to 50... (Not ideal)
There can be anywhere from 1 to 100 anchor/div combinations, but more often than not in single digits so there's almost ...
- 151
2
votes
0
answers
42
views
Utility classes to control word breaks
I want to know if my SCSS code looks correct.
Note: Everything works as I expected. The Main Idea of this code is to generate Word Break Utilities for controlling word breaks in an element.
using SCSS ...
- 21
3
votes
1
answer
84
views
Simple website made for learning purposes
Hello I've just finished coding one of my first websites.
And I would love some feedback. I know that I really need to improve my design and improve my code and for that I need some tips from you guys
...
- 377
0
votes
1
answer
38
views
Does this SASS make sense?
I'm trying to automate the CSS I write by developing SASS files I can reuse. I want to create a utility SASS file for padding and came up with the following.
...
- 229
4
votes
1
answer
88
views
Keyframes animation
Is there a way I could simplify this with Sass or JS? It works, but it's not what I'd call 'DRY' code. An alternate form I've tried is a Sass for loop but can't get ...
- 207
4
votes
1
answer
68
views
Compile SASS files in a directory via Gulp.js tasks, one of which produces logging output
If the default task is executed here, the file name to be compiled is passed to the argument of the CompileSass function. When ...
- 43
6
votes
1
answer
578
views
Resizable split DIVs Vue.js
I just started Developing Web App (Vue.js) for my company for around 1-2 months. Therefore, my knowledge and experience in HTML, CSS and Javascript is kinda shallow.
I've created a custom resizable ...
1
vote
2
answers
70
views
Using CSS grid to align content in a non responsive div
My job is to supervise a junior developer, but I am mainly a javascript developer and my CSS skills are a bit basic. However, I spotted some things in his CSS code that seem unorthodox to me. He ...
- 153
3
votes
1
answer
60
views
Sass styling with React components
I have put together a piece of what can be a much larger frontend in Reactjs.
I just put together the component that renders to the user a list of airports and hotels as well as a header component.
...
- 165
2
votes
1
answer
128
views
React board game app
I was told to code a board game app using React for a job interview.
They told me they chose other candidates to move forward with, so I was wondering on what I could improve.
The full code can be ...
- 131
2
votes
1
answer
127
views
Rendering three vertical dots using SCSS
I have a pretty simple question but I can't seem to find a solution for it. I have the following SCSS code (can be found below) which works fine, but I think it could be simplified to get rid of the ...
- 123
5
votes
0
answers
96
views
SASS script to generate Pygments / Rogue stylesheet output
I've written some SASS code to generate a Pygments syntax highlighter style sheet (which are, by extension, compatible with Rouge). Such a stylesheet is normally generated by the ...
- 530
2
votes
1
answer
48
views
2
votes
2
answers
893
views
SASS mixin for a font-awesome before/after usage
In my SASS I use font-awesome declarations all over the place. I'm in love with it. I've created a SASS mixin for the usage:
I started with the following:
...
- 131
10
votes
1
answer
548
views
Lightweight Angular tooltip component
I made a small Popup component to show different error/success...etc. messages.
Template:
...
- 313
2
votes
0
answers
306
views
Compiles SCSS Code to CSS in the browser
First of all, thanks for reviewing my code. I am half-way done through a GitHub Project I call ScriptSass, that parses SCSS Code using Javascript into regular CSS. Now, I have reluctantly added an ...
- 21
3
votes
0
answers
323
views
CSS animation of ravens flying in a circle
I just made a little experiment on codepen with this animation.
But I get some performance issues: sometimes it's not as smooth as it should be.
Does someone know some practice I could use to ...
2
votes
1
answer
528
views
SASS/SCSS mixin for button states
I have created several mixins for a button to attempt to reduce duplication and contribute to the overall improvement of performance. I am looking for guidance on how to tighten this up so it is as ...
- 21
1
vote
1
answer
124
views
Website using HTML/CSS/SASS/Bootstrap/JQuery
I'm learning Sass and responsive websites, I've made this simple portfolio website with the help of a bootstrap template (freelancer) and I'd like to know if I'm doing SASS correctly and ways to ...
user123850
0
votes
2
answers
126
views
Simple SASS & BEM module for social feed widgets
I've been messing around with SASS and BEM for the last few months. I recently starting 'thinking' in modular in terms of building out my applications (for re-usability and simplicity).
I am coding ...
- 127
1
vote
1
answer
90
views
Control element with JavaScript and SASS: move options between two select-elements
Who has to use enterprise software like for example Microsoft Access knows that control: There a two select lists. The one list offers possible options. With a button you can add one or multiple ...
- 4,516
3
votes
0
answers
60
views
Polyfill for a legacy system: Attach "labels" to their corresponding checkboxes
I had to do some maintenance programming on a legacy software recently.
Most of the system's logic is done with Java and PL SQL.
The Java creates some special kind of XML. These XML is then ...
- 4,516
2
votes
0
answers
66
views
jQuery Mobile Menu plugin
I would like some opinions on this Mobile Menu plugin I wrote for work. We develop custom WordPress themes, nothing too advanced or anything. I would like if anyone could just take a look and provide ...
- 21
1
vote
1
answer
2k
views
"Spinning wheels" - Animated spinner with SVG and Sass-CSS
I've made this little animation using SVG, CSS-keyframes and a bit of Sass.
...
- 4,516
1
vote
1
answer
480
views
"Star Field" Animation with JavaScript and Sass-CSS
I've have make this animation on the weekend as a "just for fun" thing. And for to play with various techniques I've seen in others code.
I think it works quite alright.
Nevertheless I would ...
- 4,516
1
vote
1
answer
2k
views
Responsive SASS header
I'm currently working on an header for some homepage. It should be responsive. When enough width is available a floating header is displayed (logo on the left / menu on the right). With less and less ...
user101048
2
votes
1
answer
15k
views
React beginner exercise: Build a base arithmetic calculator
Exercise assignment:
Build a calculator with React which can add, subtract, multiply and divide.
See image below for reference
Give it whatever design and colors you want
Each text ...
- 4,516
6
votes
3
answers
1k
views
Toggle menu under specified screen width
I've created a simple toggle menu in jQuery, which is capable of specifying a breakpoint, but I'm afraid my code is too complicated. How can I make it simpler?
I also have a question about ...
- 151
2
votes
0
answers
43
views
Styling different icon positions in boxes with Sass
I've been learning Sass recently and I've made a small project to master key concepts. I've tried to use placeholder to make different styles of boxes. I have a few questions:
is the project ...
- 151
3
votes
2
answers
11k
views
Tooltip-overlay following the mouse pointer
The purpose is to attach a tooltip-element to arbitrary HTML-elements.
The tooltip appears when the user hovers an element. Follows the mouse-pointer while moving over the element.
...
- 4,516
1
vote
1
answer
64
views
Showing the current view-position within the web page
I've made this coding for large web pages with lots of text, images etc. If the user scrolls down or up it shows where the current view approximately is. In relation to the overall document height.
I'...
- 4,516
0
votes
1
answer
80
views
Excerpt from a grocery shopping site using SASS [closed]
I am a UI/UX designer. I am working on the HTML of a website, using Sass/scss+bootstrap 3 project. It's my first project in sass/scss.
Now my developer's feedback is: HTML code is not up to mark. ...
- 101
0
votes
1
answer
40
views
HTML-formular with animated input-elements
The idea is to improve the usage of larger formulars. Done by adding a little animation to the input-elments.
When one of the textboxes is clicked or focussed via tab appears a colored border. ...
- 4,516
2
votes
0
answers
152
views
Animation with JavaScript and Sass : Neon light banner
After reading a bit about CSS3-text-shadows and seeing a few advanced examples I had the idea for a "neon light"-banner. Next idea was to animate it.
Finally it has become a mixture between a Sass-...
- 4,516
1
vote
1
answer
235
views
SASS + Compass - File Structure and @Import order [closed]
I recently started using SASS and Compass in my projects. So far I am using the file structure shown below.
...
- 127
0
votes
2
answers
85
views
Styling the font size in a nav bar
The font size scales up/down based on the size of the browser to fit the nav bar buttons (using @media).
...
- 127
1
vote
1
answer
1k
views
Flexbox & BEM 'table'
Using SCSS and React, I have made a little table (not an HTML table), which is responsive based on variable-width cells. That is to say, each cell whose width is not variable has a ...
- 1,302
4
votes
1
answer
164
views
Render SVG background with Gradient
I'm new to and still fairly confounded by SVGs. I'm feeling pretty happy with the following hobbled together SCSS code demonstrated here:
...
- 630
2
votes
1
answer
182
views
SASS mixin to define modifier classes for various screen sizes
I wish to make a mixin to produce the following result of modifier classes:
...
- 137
3
votes
1
answer
1k
views
Simple modals in vanilla JS
Recently I was looking for some really simple modal/popup solution in vanilla JS, but nothing popped. So I wrote mine component. It works great so far, have all the options I need, but I don't know if ...
- 133
3
votes
0
answers
428
views
Gulp file for Jade, SASS, Optimize-html, jekyll and more
I have the following gulpfile which I use for development. It used to be a simple gulpfile with just jade compiling, sass, jekyll-rebuild, etc. but then I decided to add HTML Optimization my gulpfile ...
- 131
2
votes
1
answer
550
views
Simple recipes web app with Redux
I have completed a coding challenge from Free Code Camp. The challenge's user stories are as follows:
I can create recipes that have names and ingredients.
I can see an index view where the ...
- 1,302
3
votes
3
answers
3k
views
Animated SVG pie chart with custom properties
I've made a small js/css/html module which purpose is to fill a pie chart up to a given percentage. Basically it could be used for instance as a filling pie chart that keep tracks of the amount of ...
- 341